Google Maps Multiple Markers
Also handles the closure issue
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
CSS
#map_canvas {
width: 400px;
height: 400px;
background: #CCC;
}
JavaScript
var map,
geocoder,
bounds,
address,
myLatlng = new google.maps.LatLng(46.7894635, 7.1289224);
function initialize() {
var mapOptions = {
center: myLatlng,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false,
scrollwheel: false,
navigationControl: true,
mapTypeControl: false,
scaleControl: true,
draggable: true
};
//styles
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var buildings = [
'route nord 1, 15.07.1993, Marly', 'Rte du centre 35, Marly', 'route du châtelet 3, marly', 'Chemin du pont 6, Marly', 'Chemin des épinettes 35, Marly', 'Ch des cossettes 11, Marly', 'Rte de la gruyère 8, Marly', 'Route de Fribourg, 17, Marly', 'rte du centre, marly', 'Rte du centre 25, Marly' ];
geocoder = new google.maps.Geocoder();
for (var i=0; i < buildings.length; i++) {
// Create a new lexical scope by "copying the buildings"
(function(address) {
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Create the marker
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
// Create the info window
var infowindow = new google.maps.InfoWindow({
content: address
});
// Add the eventListener
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, this);
map.setZoom(12);
map.panTo(this.getPosition());
});
};
...