Custom tooltip on marker for google maps in React
Today we’ll show you how to add a custom tooltip on marker for google maps in React. It is also known as the infoWindow in google maps.
In the previous article, we have explained how to add multiple custom markers to google maps. Here we will use the same example with slight changes. We will also set the title on marker in google maps using ReactJS.
Custom tooltip on marker for google maps
1. Create react application
Let’s create a react application using create-react-app npm package. Run the following code to create a react app.
1 | npx create-react-app custom-tooltip-google-map-react |
2. Add multiple custom markers
First, we will write a logic to add multiple custom markers to google maps. Refer the following article for step by step instruction.
Add Multiple Custom Markers to Google Maps in ReactJS
3. Add tooltip on marker
Now, we have to update the marker object for tooltip. We will also set the title on markers.
Let’s slightly update the marker list to add title and tooltip on marker in GMap.js file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | // list of the marker object along with icon, title & info const markerList = [ { lat: 59.2967322, lng: 18.0009393, icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Flag--Right-Chartreuse.png', info: '<div><h2>Info 1</h2><p>Lorem Ipsum is simply dummy text<br/> of the printing and typesetting industry.</p></div>', title: "Title 1" }, { lat: 59.2980245, lng: 17.9971503, icon: 'https://cdn2.iconfinder.com/data/icons/IconsLandVistaMapMarkersIconsDemo/256/MapMarker_Marker_Outside_Chartreuse.png', info: '<div><h2>Info 2</h2><p>Lorem Ipsum is simply dummy text<br/> of the printing and typesetting industry.</p></div>', title: "Title 2" }, { lat: 59.2981078, lng: 17.9980875, icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Ball-Right-Azure.png', info: '<div><h2>Info 3</h2><p>Lorem Ipsum is simply dummy text<br/> of the printing and typesetting industry.</p></div>', title: "Title 3" }, { lat: 59.2987638, lng: 17.9917639, icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Marker-Outside-Pink.png', info: '<div><h2>Info 4</h2><p>Lorem Ipsum is simply dummy text<br/> of the printing and typesetting industry.</p></div>', title: "Title 4" } ]; |
We have to add the title attribute in the google.maps.Marker and create an info window to manage show/hide window on click of the marker. We will use the click event listener to open the info window.
Check the following code of the createMarker function in the same file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // create marker on google map const createMarker = (markerObj) => { const marker = new window.google.maps.Marker({ position: { lat: markerObj.lat, lng: markerObj.lng }, map: googleMap, icon: { url: markerObj.icon, // set marker width and height scaledSize: new window.google.maps.Size(50, 50) }, title: markerObj.title }); const infowindow = new window.google.maps.InfoWindow({ content: markerObj.info }); marker.addListener("click", () => infowindow.open(googleMap, marker)); return marker; } |
4. Output
Run the project and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!
thank you soooo much it worked for me thanks a lot
Glad it helped!