Googleマップにいくつかのマーカーを配置するための次のコードがあります。
私が今やりたいことは、ユーザーがマーカーをクリックしてズームインし、マップをマーカー位置の中央に配置することです (これは、setMarkers 関数のコードの終わりに向かって動作していないビットです)。
何か案は?
var infowindow = null;
var sites = [];
var partsOfStr = [];
var partsOfStr2 = [];
var bounds;
$(document).ready(function () {
$("select[id*='coordList']").find("option").each(function () {
partsOfStr = $(this).val().split(',');
partsOfStr2 = $(this).text().split('^');
sites.push([partsOfStr2[0], parseFloat(partsOfStr[0]), parseFloat(partsOfStr[1]), partsOfStr[2], partsOfStr2[1], partsOfStr2[2], partsOfStr2[3], partsOfStr[3], partsOfStr[4], partsOfStr[5]]);
});
initialize();
});
function initialize() {
bounds = new google.maps.LatLngBounds();
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(54.57951, -4.41387),
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
google.maps.event.addListener(infowindow,'closeclick',function(){
map.setCenter(new google.maps.LatLng(54.57951, -4.41387));
map.setZoom(6);
});
}
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
html: "<div class='mapDesc'>content here...</div>"
});
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
map.setCenter(marker.getPosition()); // NOT WORKING!!!!!!!
map.setZoom(10);
});
bounds.extend(new google.maps.LatLng(sites[1], sites[2]));
map.fitBounds(bounds);
}
}