Multiple markers with infowindows in Google map API

Add a div tag to your html file and give an id like "GoogleMap" for the div.
Crate a Google map variable and assign the google map object to it.
For example, We have an array of 5 sample latitude and longitude values with location name.
After creating the google map object, then create the marker and infowindow for each latlong.
Finally an additional checking for open an infowindow at a time.

<!DOCTYPE html><html><body> <h1>
Multiple Markers with InfoWindows</h1>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBO4zImp8oXmRoD8GU9_6UHsoNgpJ6H9C8"></script><div id="GoogleMap" style="border:1px solid #CCCCCC;height:500px;width:100%;">
</div>
</body><script>    var Infowindows = [];     var Markers = [];     var CurrentInfoWindow = null;     var GoogleMap = new google.maps.Map(document.getElementById('GoogleMap'),             {             center:new google.maps.LatLng(-33.890542, 151.274856),                 zoom: 10             });      var LocationData = [         ['Bondi Beach', -33.890542, 151.274856],         ['Coogee Beach', -33.923036, 151.259052],         ['Cronulla Beach', -34.028249, 151.157507],         ['Manly Beach', -33.80010128657071, 151.28747820854187],         ['Maroubra Beach', -33.950198, 151.259302]     ];     for (var i = 0; i < LocationData.length; i++)     {         var Location = LocationData[i];         var LatLong = new google.maps.LatLng(Location[1], Location[2]);         Infowindows[i] = new google.maps.InfoWindow();         Infowindows[i].setContent(Location[0]);         Markers[i] = new google.maps.Marker(                 {                     map: GoogleMap,                     markerIndex: i                 });         Markers[i].setPosition(LatLong);         google.maps.event.addListener(Markers[i],'click',function(e)         {             if(CurrentInfoWindow !== null)             {                 CurrentInfoWindow.close();                 CurrentInfoWindow = null;             }             CurrentInfoWindow = Infowindows[this.markerIndex];             Infowindows[this.markerIndex].open(GoogleMap,Markers[this.markerIndex]);         });console.log(Infowindows[i]);     } </script></html>

Demo

Multiple markers with infowindows in Google map API

No comments:

Post a Comment

Popular Posts

Tags

Contact Form