This is an example of how we can build with Google API a map that contains more than one simple marker.
Check the result [here] (http://codepen.io/nncl/pen/QjwKYL).
Instead of the HTML tag, we need to call the Google Maps API.
<script src="https://maps.googleapis.com/maps/api/js?callback=callMap" async defer></script>
If the function callMap is not on the DOM, just remove the callback and async defer:
<script src="https://maps.googleapis.com/maps/api/js"></script>
Now, the HTML tag:
<div id="map"></div>
Now, everybody:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JS - Multiple Markers</title>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="/js/map.min.js"></script>
</body>
</html>
Here, we need/can to tell the title of marker - it showed on click - and the latitude and longitude positions.
{
"points" : [
[
"Chronic Rua Maria Joaquina",
-23.534749,
-46.611924
],
[
"Chronic Rua da Juta",
-23.539512,
-46.619652
]
]
}
$public.map = function() {
$.get('https://gist.githubusercontent.com/mariosmello/d6cce41514d6fa2e8ef6/raw/c6eecd00ed62302ebda36d488334f3ee265b291c/beaches-google.json', function(data) {
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
zoom: 15,
zoomControl: true,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infowindow = new google.maps.InfoWindow();
var marker;
$(data.points).each(function( i, o ) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(o[1], o[2]),
map: map
});
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(o[0]);
infowindow.open(map, marker);
}
})(marker, i));
});
map.fitBounds(bounds);
var listener = google.maps.event.addListener(window, 'load', function() {
map.setZoom(3);
google.maps.event.removeListener(listener);
});
}, 'json');
}