Центр Google Map и InfoWindow

Question

Прошу прощения, если это было отвечено где-то в другом месте, но когда я добавляю прослушиватель к моим картам, он заставляет мои маркеры скрывать/не загружать, так что кто-то может объяснить, как загрузить infowindow и центр маркера по щелчку?

Heres мой код до сих пор:

<section id="wrapper"> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<article> 
</article> 
<script> 
function success(position) { 
    var mapcanvas = document.createElement('div'); 
    mapcanvas.id = 'mapcontainer'; 
    mapcanvas.style.height = '600px'; 
    mapcanvas.style.width = '100%'; 
    document.querySelector('article').appendChild(mapcanvas); 

    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    var options = { 
    zoom: 12, 
    //center: coords, 
    center: new google.maps.LatLng(51.416741,-0.543854), 
    mapTypeControl: false, 
    navigationControlOptions: { 
     style: google.maps.NavigationControlStyle.SMALL 
    }, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("mapcontainer"), options); 

    // Geolocation 
    var marker = new google.maps.Marker({ 
     position: coords, 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/micons/blue-dot.png', 
     title:"You are here!", 
    }); 

    // Great Fosters 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.416741,-0.543854), 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png', 
     title:"Great Fosters", 
    }); 

    // St Matthews 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.432327,-0.459162), 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/icons/orange-dot.png', 
     title:"St Matthews", 
    }); 

    // ----- STAINES HOTELS - START ----- 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.435698,-0.514469), 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
     title:"Travel Lodge Staines", 
    }); 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.432156,-0.51617), 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
     title:"Thames Lodge Staines", 
    }); 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.43218,-0.516293), 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
     title:"The Boleyn Staines", 
    }); 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.432534,-0.516422), 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
     title:"The Swan Staines", 
    }); 
    // ----- STAINES HOTELS - END ----- 

} 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(success); 
} else { 
    error('Geo Location is not supported'); 
} 
</script> 
</section> 

EDIT:

Теперь я изменил код, чтобы включить массивы, и это работает довольно хорошо, но теперь я хочу, чтобы маркер центра на карте, когда и я хочу, чтобы все маркеры были в окне, но fitBounds, похоже, ничего не делает. Можно показать здесь http://www.everythingcreative.co.uk/marker

<section id="wrapper"> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<article> 
</article> 
<script> 

    var markers = [ 
    ['Great Fosters', 51.416741,-0.543854, 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'], 
    ['St Matthews', 51.432327,-0.459162, 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png'], 
    // Staines 
    ['Travel Lodge Staines', 51.435698,-0.514469, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['Thames Lodge Staines', 51.432156,-0.51617, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['The Boleyn Staines', 51.43218,-0.516293, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['The Swan Staines', 51.432534,-0.516422, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    // Surrey 
    ['The Runnymede Hotel', 51.43751,-0.537544, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['The Wheatsheaf Hotel', 51.409151,-0.592704, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['The Premier Inn Sunbury', 51.419322,-0.42248, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['The Crown Chertsey', 51.39181,-0.501861, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    // Heathrow 
    ['Sofitel Heathrow', 51.473478,-0.49152, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['Marriott Heathrow', 51.481263,-0.438209, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['Premier Inn Heathrow', 51.481615,-0.482288, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'] 
]; 

function success(position) { 
    var mapcanvas = document.createElement('div'); 
    mapcanvas.id = 'mapcontainer'; 
    mapcanvas.style.height = '600px'; 
    mapcanvas.style.width = '100%'; 
    document.querySelector('article').appendChild(mapcanvas); 

    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    var options = { 
    zoom: 12, 
    //center: coords, 
    center: new google.maps.LatLng(51.416741,-0.543854), 
    mapTypeControl: false, 
    navigationControlOptions: { 
     style: google.maps.NavigationControlStyle.SMALL 
    }, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("mapcontainer"), options); 

    // Marker Control 
    var infowindow = new google.maps.InfoWindow(), marker, i; 
for (i = 0; i < markers.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(markers[i][1], markers[i][2]), 
     map: map, 
     icon: markers[i][3] 
    }); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(markers[i][0]); 
      infowindow.open(map, marker); 
     } 
    })(marker, i)); 
} 

function AutoCenter() { 
// Create a new viewpoint bound 
var bounds = new google.maps.LatLngBounds(); 
// Go through each... 
$.each(markers, function (index, marker) { 
bounds.extend(marker.position); 
}); 
// Fit these bounds to the map 
map.fitBounds(bounds); 
} 

    // Geolocation 
    var GeoMarker = new google.maps.Marker({ 
     position: coords, 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/micons/blue-dot.png', 
     title:"You are here!", 
    }); 


} 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(success); 
} else { 
    error('Geo Location is not supported'); 
} 
</script> 
</section> 

Answer 1

Чтобы центрировать карту на маркер при щелчке, изменить код, чтобы сделать это:

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     // center on marker 
     map.setCenter(marker.getPosition()); 
     // open the infowindow 
     infowindow.setContent(markers[i][0]); 
     infowindow.open(map, marker); 
    } 
})(marker, i)); 

для fitBounds работать, вы должны пройти. расширить метод объекта google.maps.LatLng. Самый простой способ сделать это учитывая существующий код будет поместить его в «контрольный маркер» цикла:

var bounds = new google.maps.LatLngBounds(); 
for (i = 0; i < markers.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(markers[i][1], markers[i][2]), 
     map: map, 
     icon: markers[i][3] 
    }); 
    bounds.extend(marker.getPosition()); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(markers[i][0]); 
      infowindow.open(map, marker); 
     } 
    })(marker, i)); 
} 
map.fitBounds(bounds);