0

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);
Community
  • 1
  • 1
YaKs
  • 143
  • 12
  • I add an alert right before the setZoom , alert(map.getZoom()); and eventhough shows 12... the zoom is IN to the max... – YaKs Jul 31 '12 at 00:35
  • solved adding 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); – YaKs Jul 31 '12 at 15:02

1 Answers1

0

try zooming out after executing the fitbounds function:

bounds.extend(myLatlng); 
map.fitBounds(bounds);
map.setZoom(map.getZoom() - 2) //or - 1, or a fixed number, depending on how close or far out you want it zoomed in
pythonian29033
  • 5,148
  • 5
  • 31
  • 56