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
|
1 2 3 4 |
<h3>My Google Maps Demo</h3> <!--The div element for the map --> <div id="map"></div> |
To set Width and Height of Map Container add below CSS style
|
1 2 3 4 5 6 7 |
#map { height: 400px; /* The height is 400 pixels */ width: 100%; /* The width is the width of the web page */ } |
Step 2) Include Google Maps JS API in HTML
|
1 2 |
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> |
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
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
var map; var InforObj = []; var centerCords = { lat: -25.344, lng: 131.036 }; var markersOnMap = [{ placeName: "Australia (Uluru)", LatLng: [{ lat: -25.344, lng: 131.036 }] }, { placeName: "Australia (Melbourne)", LatLng: [{ lat: -37.852086, lng: 504.985963 }] }, { placeName: "Australia (Canberra)", LatLng: [{ lat: -35.299085, lng: 509.109615 }] }, { placeName: "Australia (Gold Coast)", LatLng: [{ lat: -28.013044, lng: 513.425586 }] }, { placeName: "Australia (Perth)", LatLng: [{ lat: -31.951994, lng: 475.858081 }] } ]; window.onload = function () { initMap(); }; function addMarker() { for (var i = 0; i < markersOnMap.length; i++) { var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName + '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>'; const marker = new google.maps.Marker({ position: markersOnMap[i].LatLng[0], map: map }); const infowindow = new google.maps.InfoWindow({ content: contentString, maxWidth: 200 }); marker.addListener('click', function () { closeOtherInfo(); infowindow.open(marker.get('map'), marker); InforObj[0] = infowindow; }); // marker.addListener('mouseover', function () { // closeOtherInfo(); // infowindow.open(marker.get('map'), marker); // InforObj[0] = infowindow; // }); // marker.addListener('mouseout', function () { // closeOtherInfo(); // infowindow.close(); // InforObj[0] = infowindow; // }); } } function closeOtherInfo() { if (InforObj.length > 0) { /* detach the info-window from the marker ... undocumented in the API docs */ InforObj[0].set("marker", null); /* and close it */ InforObj[0].close(); /* blank the array */ InforObj.length = 0; } } function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: centerCords }); addMarker(); } |
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:
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<!DOCTYPE html> <html> <head> <style> /* <span class="metadata-marker" style="display: none;" data-region_tag="css"></span> Set the size of the div element that contains the map */ #map { height: 400px; /* The height is 400 pixels */ width: 100%; /* The width is the width of the web page */ } </style> <script> var map; var InforObj = []; var centerCords = { lat: -25.344, lng: 131.036 }; var markersOnMap = [{ placeName: "Australia (Uluru)", LatLng: [{ lat: -25.344, lng: 131.036 }] }, { placeName: "Australia (Melbourne)", LatLng: [{ lat: -37.852086, lng: 504.985963 }] }, { placeName: "Australia (Canberra)", LatLng: [{ lat: -35.299085, lng: 509.109615 }] }, { placeName: "Australia (Gold Coast)", LatLng: [{ lat: -28.013044, lng: 513.425586 }] }, { placeName: "Australia (Perth)", LatLng: [{ lat: -31.951994, lng: 475.858081 }] } ]; window.onload = function () { initMap(); }; function addMarkerInfo() { for (var i = 0; i < markersOnMap.length; i++) { var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName + '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>'; const marker = new google.maps.Marker({ position: markersOnMap[i].LatLng[0], map: map }); const infowindow = new google.maps.InfoWindow({ content: contentString, maxWidth: 200 }); marker.addListener('click', function () { closeOtherInfo(); infowindow.open(marker.get('map'), marker); InforObj[0] = infowindow; }); // marker.addListener('mouseover', function () { // closeOtherInfo(); // infowindow.open(marker.get('map'), marker); // InforObj[0] = infowindow; // }); // marker.addListener('mouseout', function () { // closeOtherInfo(); // infowindow.close(); // InforObj[0] = infowindow; // }); } } function closeOtherInfo() { if (InforObj.length > 0) { /* detach the info-window from the marker ... undocumented in the API docs */ InforObj[0].set("marker", null); /* and close it */ InforObj[0].close(); /* blank the array */ InforObj.length = 0; } } function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: centerCords }); addMarkerInfo(); } </script> </head> <body> <h3>My Google Maps Demo</h3> <!--The div element for the map --> <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> </body> </html> |
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
Very clean and useful googlemaps tutorial containing all the nice basics – thank you for sharing!! Cheers to down under 🙂
Hey Karl, thanks for sharing kind words 🙂
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?
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’ });