-
-
Save parth1020/4481893 to your computer and use it in GitHub Desktop.
<html> | |
<head> | |
<title>Google Maps Multiple Markers</title> | |
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> | |
</head> | |
<body> | |
<div id="map" style="height: 400px; width: 500px;"> | |
</div> | |
<script type="text/javascript"> | |
var locations = [ | |
['Bondi Beach', -33.890542, 151.274856, 4], | |
['Coogee Beach', -33.923036, 151.259052, 5], | |
['Cronulla Beach', -34.028249, 151.157507, 3], | |
['Manly Beach', -33.80010128657071, 151.28747820854187, 2], | |
['Maroubra Beach', -33.950198, 151.259302, 1] | |
]; | |
var map = new google.maps.Map(document.getElementById('map'), { | |
zoom: 10, | |
center: new google.maps.LatLng(-33.92, 151.25), | |
mapTypeId: google.maps.MapTypeId.ROADMAP | |
}); | |
var infowindow = new google.maps.InfoWindow(); | |
var marker, i; | |
for (i = 0; i < locations.length; i++) { | |
marker = new google.maps.Marker({ | |
position: new google.maps.LatLng(locations[i][1], locations[i][2]), | |
map: map | |
}); | |
google.maps.event.addListener(marker, 'click', (function(marker, i) { | |
return function() { | |
infowindow.setContent(locations[i][0]); | |
infowindow.open(map, marker); | |
} | |
})(marker, i)); | |
} | |
</script> | |
</body> | |
</html> |
@juliettech13 Please Generate API key and just add it to this script below
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
love you bro
thx u bro u are fucking awesome
Good example, how to make infobox opened by default for all markers ?
Thanks
Thanks
thank you very much bro .
this cord to easy and very usedfull
thank you so much for code and it working fine and show all the location are visible.
but on the map it shows "For development purpose only".
thank you so much for code and it working fine and show all the location are visible.
but on the map it shows "For development purpose only".
Hello Aaditya
you need to replace below link.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>for the your api key ,
go to https://developers.google.com/maps/documentation/javascript/get-api-key
Where did you pass the API key if you were using this script?
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
rather than the one suggested in the Google Maps API page(https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key)?
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>