Embed Google Maps with Multiple Markers and InfoWindows / Info Popups Open on Click or Mouse Hover

Google Maps provide in-depth information each and every street on earth, it proves a good way to show your location or multiple locations on Google Map and not only this, but we can also embed this Map with Multiple Markers and Info Windows to show Information on Click or Hover.

In this post, we will discuss How to Embed Google Javascript Maps Anywhere with Multiple Locations with InfoWindows or Info Windows.

Step 1) Place following HTML Code

To set Width and Height of Map Container add below CSS style

Step 2) Include Google Maps JS API in HTML

Note: Now to use Google Maps API we must have API Key which needs to be added in API URL above. See How to GET API Key?


Step 3) Add following JS script Code in HTML

centerCords: will lat Lattitude & Longitude object to show the center of the map on load.
InforObj: will have InfoWindow object that will be used to close other info’s on click or hover.
markersOnMap: Data object having Lat Long and InfoWindow content in HTML.
initMap() : Method to load map on onLoad method
addMarkerInfo() : Add Markers and Infowindow in for loop on markersOnMap
closeOtherInfo() : Keeps track of clicked infoWindow then close others to keep only one open at a time.
Currently, we have Click even to open InfoWindow popup but there is also commented code to show on Hover.
Complete Code with JS and CSS will look like below:

See working demo link

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

3 Comment threads
1 Thread replies
Most reacted comment
Hottest comment thread
4 Comment authors
William BarnesMartinJolly.exeKarl Recent comment authors
newest oldest most voted
Notify of

Very clean and useful googlemaps tutorial containing all the nice basics – thank you for sharing!! Cheers to down under 🙂


OK, I haven’t tested it, but, isn’t the text of the contentString going to be the same for all of the place names?

William Barnes
William Barnes

Very useful googlemaps tutorial for adding markers, I was just wondering if there is a way of adding markerclusters to this script?

// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, { imagePath: ‘https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m’ });