lewisjenkins · August 29, 2015 14:01 · May 12, 2014 · Mar 27, 2011 · Mar 27, 2011
diff --git a/MapsApiv3.html b/MapsApiv3.html
@@ -79,7 +79,7 @@
 </script>
 </head>
 <body onload="initialize()">
-  <div id="map_canvas"></div>
+  <div id="map_canvas" style="height:100%;"></div>
 </body>
 
 </html>
diff --git a/MapsApiv3.html b/MapsApiv3.html
@@ -2,15 +2,15 @@
 <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>Google static maps</title>
+<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.'],
-	['Flinders', -35.0188300, 138.5731367, 2, 'Flinders, where I study'],
-	['Glenelg Beach', -34.9803618, 138.5097885, 1, 'Glenelg Beach, no comment.'],
-	['Hindley Street', -34.9232880, 138.5935256, 1,'Hindley Street, a pub dedicated street.']
+	['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;
@@ -26,8 +26,8 @@
 
 	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
-	setMarkers(map, sites);		
 	setZoom(map, sites);
+	setMarkers(map, sites);		
 
 
 	infowindow = new google.maps.InfoWindow({

diff --git a/MapsApiv3.html b/MapsApiv3.html
@@ -0,0 +1,85 @@
+<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>Google static maps</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.'],
+	['Flinders', -35.0188300, 138.5731367, 2, 'Flinders, where I study'],
+	['Glenelg Beach', -34.9803618, 138.5097885, 1, 'Glenelg Beach, no comment.'],
+	['Hindley Street', -34.9232880, 138.5935256, 1,'Hindley Street, a pub dedicated street.']
+];
+
+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);
+
+	setMarkers(map, sites);		
+	setZoom(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>