I need to show a map with many markers and I wanted to autoresize the map accordingly.
as I already found the solution for this in this site, I add the lines
bounds.extend(myLatlng); map.fitBounds(bounds);
here the complete piece of code
<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>
this code works perfect when there are more than one marker, but when there is only one, the zoom IN is set to the max. I tried to use the setzoom method but it doesnt seem to do anything.
could someone tell me what i am doing wrong?
thanks a lot in advance. jose
UPDATED: Solved following the instructions here Using setZoom() after using fitBounds() with Google Maps API V3
the code I added
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);