tutorial101 is the one place for high quality web development, Web Design and software development tutorials and Resources programming. Learn cutting edge techniques in web development, design and software development, download source components and participate in the community.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Markers with Info Windows to Google Maps</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
#mapCanvas {
width: 100%;
height: 450px;
}
body {font-family: "Times New Roman", Times, serif;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<p><h3>Multiple Markers with Info Windows to Google Maps</h3></p>
<div id="mapContainer">
<div id="mapCanvas"></div>
</div>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCdGv5cjpA0dMUCSolCf89tl_vgccGvsu0"></script>
<script>
function initMap() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the web page
map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
map.setTilt(50);
// Multiple markers location, latitude, and longitude
var markers = [
['Olongapo City, Zambales', 14.841344, 120.282224],
['Subic Bay, Zambales', 14.786400, 120.281535],
['Angeles City, Pampanga', 15.145334, 120.585616],
['Clark Freeportzone, Pampanga', 15.185247, 120.539395]
];
// Info window content
var infoWindowContent = [
['<div class="info_content">' +
'<h3>Olongapo City, Philippines</h3>' +
'<p>Olongapo City Zambales Philippines</p>' + '</div>'],
['<div class="info_content">' +
'<h3>Subic Bay, Philippines</h3>' +
'<p>Subic Bay Olongapo City Zambales Philippines</p>' +
'</div>'],
['<div class="info_content">' +
'<h3>Angeles City, Pampanga</h3>' +
'<p>Angeles City, Pampanga Philippines</p>' +
'</div>'],
['<div class="info_content">' +
'<h3>Clark Freeportzone, Pampanga</h3>' +
'<p>Clark Freeportzone, Pampanga Philippines</p>' +
'</div>']
];
// Add multiple markers to map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Place each marker on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Add info window to marker
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Center the map to fit all markers on the screen
map.fitBounds(bounds);
}
// Set zoom level
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(9);
google.maps.event.removeListener(boundsListener);
});
}
// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</body>
</html>
