多くのマーカーを含むマップを表示する必要があり、それに応じてマップのサイズを自動調整したいと考えていました。
このサイトでこれに対する解決策をすでに見つけたので、次の行を追加します
bounds.extend(myLatlng); map.fitBounds(境界);
ここに完全なコード
<script type="text/javascript">
var map;
var coords = new Object();
var markersArray = [];
coords.lat = -15.788;
coords.lng = -47.900;
var bounds = new google.maps.LatLngBounds();
function plotPoint(srcLat,srcLon,color,num,idCat,cep,message)
{
var pinColor = color;
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
var myLatlng = new google.maps.LatLng(srcLat, srcLon);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: pinImage,
shadow: pinShadow
});
boxText = document.createElement("div");
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-70, -7),
zIndex: null,
boxStyle: {
opacity: 0.85,
width: "140px"
},
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;text-align: center;";
boxText.innerHTML = message;
var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker, 'mouseover', function() {
ib.open(map,marker);
ib.show();
});
google.maps.event.addListener(marker, 'mouseout', function() {
ib.hide();
});
google.maps.event.addListener(marker, 'click', function() {
window.location = "browse.php?id="+idCat+"&cep="+cep;});
bounds.extend(myLatlng);
map.fitBounds(bounds);
map.setZoom(12);
}
function initialize()
{
var latlng = new google.maps.LatLng(coords.lat, coords.lng);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_div"), myOptions);
}
</script>
このコードは、複数のマーカーがある場合に完全に機能しますが、マーカーが 1 つしかない場合はズームインが最大に設定されます。setzoomメソッドを使用しようとしましたが、何もしないようです。
誰かが私が間違っていることを教えてもらえますか?
事前にどうもありがとう。ホセ
更新: Google Maps API V3 で fitBounds() を使用した後に setZoom() を使用するこちらの手順に従って解決 しました
私が追加したコード
zoomChangeBoundsListener =
google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
if (num_markers = 1){
this.setZoom(12);
}
});
setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 2000);