CODEWITHSUNDEEP
google-maps-api-3
13flmd
13flmd

Reputation: 35

Google Maps V3 Issue with map always centering and not allowing zooming

I have been having an issue with my Google Maps v3 code. It keeps on centering on a point and wont let me zoom or really play with the map at all. Even when you click on a plot point on the map, it quickly adjusts to the center of the map. So basically you can zoom or use the plot points on the map at all. Thanks for the help in advance.

Site: Website with issue

Code: 

$(document).ready(function(e) {
   initialize(); 
});

var map = null;
var markersArray = [];
var markers = [];
var openedInfoWindow ="";
var geocoder = new google.maps.Geocoder();

 function initialize() {

    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      zoomControl: true,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapInfoManual"),
        mapOptions);


    addMarker();      
  }





 function addMarker() {


    var bounds = new google.maps.LatLngBounds();
    for(i=0; i<markersArray.length; i++)
    {
        CodeAddress(markersArray[i]['address']);
    }
    setInterval(function()
    {

      for(i=0; i<markers.length; i++)
      {
          var point = new google.maps.LatLng(markers[i]['lat'], markers[i]      ['lng']);

          var marker = new google.maps.Marker({
              position: point,
              map: map
          });
          bounds.extend(point);

          openInfoWindow(marker,markersArray[i]['address'])         
      }
      map.fitBounds(bounds);

      },1000);

}


// Address To Marker
function CodeAddress(address)
{

geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
    lat = results[0].geometry.location.lat();
    lng = results[0].geometry.location.lng();
    markers.push({
                    'lat':lat,
                    'lng':lng,
                    'address':address
                });

} 

});   
}


//Info Window
function openInfoWindow(marker,content)
{

var infowindow = new google.maps.InfoWindow({
    content: '<div><p style=" color: #000000; font-size: 11px;">'+content+'</p>          </div>'
});



google.maps.event.addListener(marker, 'click', function() {

    if(openedInfoWindow !="")
    {
        openedInfoWindow.close()
    }


    infowindow.open(map,marker);
    openedInfoWindow = infowindow;
});
}

Upvotes: 1

Views: 296

Answers (1)

Chad Killingsworth
Chad Killingsworth

Reputation: 14411

Here's the problem:

setInterval(function()
{
  ...
  map.fitBounds(bounds);

},1000);

You are adding new markers every second and then telling the map to fit to their bounds. This resets the zoom level and viewport. Perhaps you meant to use setTimeout instead?

Upvotes: 1

Related Questions