Skip to content

Instantly share code, notes, and snippets.

@rbochet

rbochet/MapsApiv3.html

Created March 27, 2011 05:17
Show Gist options
  • Save rbochet/888937 to your computer and use it in GitHub Desktop.
Save rbochet/888937 to your computer and use it in GitHub Desktop.
Download ZIP
Google Maps API v3: LatLngBounds and multiple infoWindows
Raw
MapsApiv3.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<title>API Maps v3: Multiple infoWindows and zoom issues</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var sites = [
['Darlington', -35.0252820, 138.5630230, 1, 'Darlington, where I am living.<br/><a href="http://www.flickr.com/photos/rbochet/5560158585/" title="Figue agressive de Romain Bochet, sur Flickr"><img src="http://farm6.static.flickr.com/5030/5560158585_c9a6919140_m.jpg" width="240" height="160" alt="Figue agressive" /></a><br/>See my <a href="http://www.flickr.com/photos/rbochet/sets/72157625988396879/">Flickr album</a>'],
['Flinders', -35.0188300, 138.5731367, 2, 'Flinders, where I study <br/><a href="http://www.flickr.com/photos/rbochet/5560157467/" title="Espace détente sur le campus de Romain Bochet, sur Flickr"><img src="http://farm6.static.flickr.com/5060/5560157467_c55c85aaf6_m.jpg" width="160" height="240" alt="Espace détente sur le campus" /></a><br/>See my <a href="http://www.flickr.com/photos/rbochet/sets/72157626229866287/">Flickr album</a>'],
['Glenelg Beach', -34.9803618, 138.5097885, 1, 'Glenelg Beach, no comment.<br/><a href="http://www.flickr.com/photos/rbochet/5543247540/" title="Palmier lampadaire de Romain Bochet, sur Flickr"><img src="http://farm6.static.flickr.com/5057/5543247540_3f6ac76676_m.jpg" width="160" height="240" alt="Palmier lampadaire" /></a><br/>See my <a href="http://www.flickr.com/photos/rbochet/sets/72157626132035286/">Flickr album</a>'],
['Hindley Street', -34.9232880, 138.5935256, 1,'Hindley Street, a pub dedicated street.<br/><a href="http://www.flickr.com/photos/rbochet/5457455729/" title="Culture locale de Romain Bochet, sur Flickr"><img src="http://farm6.static.flickr.com/5052/5457455729_b8ebf274c8_m.jpg" width="240" height="160" alt="Culture locale" /></a><br/>See my <a href="http://www.flickr.com/photos/rbochet/sets/72157626085607850/">Flickr album</a>']
];
var infowindow = null;
function initialize() {
var centerMap = new google.maps.LatLng(45.3517923, 6.3101660);
var myOptions = {
zoom: 10 ,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setZoom(map, sites);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "Loading..."
});
}
/*
This functions sets the markers (array)
*/
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var site = markers[i];
var siteLatLng = new google.maps.LatLng(site[1], site[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: site[0],
zIndex: site[3],
html: site[4],
// Markers drop on the map
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
/*
Set the zoom to fit comfortably all the markers in the map
*/
function setZoom(map, markers) {
var boundbox = new google.maps.LatLngBounds();
for ( var i = 0; i < markers.length; i++ )
{
boundbox.extend(new google.maps.LatLng(markers[i][1], markers[i][2]));
}
map.setCenter(boundbox.getCenter());
map.fitBounds(boundbox);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment