{{! Shows the pictures on Google Maps. Set size of map with custom-options 'width' and 'height'  }}

<div id="map_canvas" style="width:{{width}}; height:{{height}}"></div>
<script type="text/javascript">
    var myOptions = {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	var bounds = new google.maps.LatLngBounds();
	
	{{#items}}
		// make a marker image to show a small icon of the picture itself
	/*	var image = new google.maps.MarkerImage({
		  	url: "{{square_image_url}}",
			size: new google.maps.Size(75, 75),
			origin: new google.maps.Point(0,0),
			anchor: new google.maps.Point(15, 15),
			scaledSize: new google.maps.Size(30, 30),
		});	*/
		
		// make content of the infowindow
		var dateTaken = "{{date_taken}}";
		var title = "{{title}}".replace("'","\'");
		var description = "{{description}}".replace("'","\'");
		var image_url = '{{image_url}}';
		var image_size = '{{image_size}}';
		var owner = '{{{owner}}}';
		var photoUrl = '{{photo_url}}';
	    var contentString = '<div id="content">' +
      //  '<div id="siteNotice"></div>' +
        '<p><strong>' + title + '</strong><br />' +       
        description +
		'<img src="' + image_url + '" ' + image_size + ' alt="' + title + '" />' + '</p>' +
 		//'<img src="{{buddy_icon_url}}" width="{{buddy_icon_size}}" style="float:right" />' +
		'<small>Picture taken by ' + owner + ' on ' + dateTaken + ' &mdash; ' + '<a href="' + photoUrl + '">View on flickr</a></small>' +
        '</div>';
		
		 // make infoWindow
		var infowindow = new google.maps.InfoWindow({
			content: "",
		});	
	
		// make a new marker
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng({{latitude}},{{longitude}}), 
			map: map,
			title: "{{title}}",
			infoWindowOptions: {
				content: contentString,
				maxWidth:{{image_width}},
			},
	//		icon: image,
		});   
		
		// add eventlistener to the marker to open the infowindow
		google.maps.event.addListener(marker, 'click', function() {			
			infowindow.setOptions(this.infoWindowOptions);
			infowindow.open(map, this);
		});

		// extend the bounds to the new coordinates
		bounds.extend(new google.maps.LatLng({{latitude}},{{longitude}}));
		
	{{/items}}

	// set map to fit all images
	map.fitBounds(bounds);

 </script>