いくつかのマーカーを付けた Google マップを作成しました。ただし、マーカーの 1 つは他のマーカーとは異なります。このマーカーをマップの中央に配置したいと思います。地図を作成しているとき、地図の中心をこのマーカーと同じ場所に設定していますが、無視されているようです。これが私のコードです:
var map; // Global declaration of the map
var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
var lat_longs = new Array();
var markers = new Array();
var markerCluster;
function initialize() {
centerlat = '53.1957381200000';
centerlong = '-2.8940324870000';
if(centerlat=='FALSE' && centerlong=='FALSE') {
var myLatlng = new google.maps.LatLng(51.4734,-0.137329);
} else {
var myLatlng = new google.maps.LatLng(53.1957381200000,-2.8940324870000);
}
var myOptions = {
//zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myLatlng = new google.maps.LatLng(52.6274684, -1.1290035);
var markerOptions = {
map: map,
position: myLatlng,
title: "Head Office"
};
marker_0 = createMarker(markerOptions);
marker_0.set("content", '<h4>Head Office</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis urna nibh, sed venenatis felis. In hac habitasse platea dictumst. Sed suscipit lobortis luctus. Quisque vestibulum facilisis risus, in suscipit nisl hendrerit et.</p><p><a href="#contact_form" class="btn btn-primary contact-office" data-office_id="13">Contact This Office</a></p>');
google.maps.event.addListener(marker_0, "click", function(event) {
iw.setContent(this.get("content"));
iw.open(map, this);
});
var myLatlng = new google.maps.LatLng(51.489827, -0.196938);
var markerOptions = {
map: map,
position: myLatlng,
title: "London"
};
marker_1 = createMarker(markerOptions);
marker_1.set("content", '<h4>London</h4><p>Our London office is based at the Earls Court Exhibition centre. Our central location allows us to offer our award winning services to all venues across the capital.</p><p><a href="#contact_form" class="btn btn-primary contact-office" data-office_id="12">Contact This Office</a></p>');
google.maps.event.addListener(marker_1, "click", function(event) {
iw.setContent(this.get("content"));
iw.open(map, this);
});
/* IF the user has performed a search then add a marker showing the center of the search */
if(centerlat!=='FALSE' && centerlong!=='FALSE')
{
var myLatlng = new google.maps.LatLng(centerlat, centerlong);
var markerOptions = {
map: map,
position: myLatlng,
title: "Your Location",
icon : "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"
};
marker_you = createMarker(markerOptions);
marker_you.set("content", '<h4>Your Location</h4><p>This is the approximate location of your search</p>');
google.maps.event.addListener(marker_you, "click", function(event) {
iw.setContent(this.get("content"));
iw.open(map, this);
});
}
var clusterOptions = {
gridSize: 60,
minimumClusterSize: 5
};
markerCluster = new MarkerClusterer(map, markers, clusterOptions);
fitMapToBounds();
}
function createMarker(markerOptions) {
var marker = new google.maps.Marker(markerOptions);
markers.push(marker);
lat_longs.push(marker.getPosition());
return marker;
}
function fitMapToBounds() {
var bounds = new google.maps.LatLngBounds();
if (lat_longs.length>0) {
for (var i=0; i<lat_longs.length; i++) {bounds.extend(lat_longs[i]);}
map.fitBounds(bounds);
}
}
window.onload = initialize;