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

2 comments:

Arthur9 November 2017 at 05:03
My primary task was to make an option on the site so that users could create a route to the client, for example, to arrive by car or by the else transport and indicate how much time it would take. Google Maps for
Joomla https://elfsight.com/google-maps-widget/ I downloaded really quickly and having configured them I realized that everything is working correctly. In general, I can hardly remember what it was before the creation of Google, logistics, transportation. How did this world exist at all?
for IT the19 March 2018 at 00:07
great

Multiple markers with infowindows in Google map API

2 comments:

Try It Editor for HTML, CSS & JS

Blog Archive

Tags

Popular Posts

Contact Form