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

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Jolly.exeKarl Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Karl
Guest
Karl

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