<!DOCTYPE html>
<html>
<head>
<title>Google Maps Multiple Markers</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?key=<INSERT YOUR OWN DAMN KEY>" type="text/javascript"></script>
<script type="text/javascript">
var map;
var centerLatLng = new google.maps.LatLng(-33.92, 151.25);
// Create the map, define zoom level, set center point and declare map type
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: centerLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
});
// When the map container is re-sized, reset the center point of the map
google.maps.event.addDomListenerOnce(map, 'idle', function () {
google.maps.event.addDomListener(window, 'resize', function () {
map.setCenter(centerLatLng);
});
});
}
// Accepts the array of markers and places those markers, with titles on the map.
function loadMarkers(locations) {
for (var i = 0; i < locations.length; i++) {
new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][0]
});
}
}
// Once the page is finshed loading ...
$(document).ready(function() {
// Initialize the map,
initialize();
// Load the markers to the map. Since the markers are loaded after the page is
// loaded, the marker data can be loaded in the view.
loadMarkers([
['Bondi Beach', -33.890542, 151.274856],
['Coogee Beach', -33.923036, 151.259052],
['Cronulla Beach', -34.028249, 151.157507],
['Manly Beach', -33.800101, 151.287478],
['Maroubra Beach', -33.950198, 151.259302]
]);
});
</script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
margin: 5px;
border: 1px solid #333;
height: 300px;
}
</style>
</head>
<body>
<div id="map" name="map"></div>
</body>
</html>
Comments