Javascript Array Push It (salt N Pepa Style)

Hey all I am in need of some help with adding to my array for the Google Maps API V3. Below is my code to populate the map with location marks: var geocoder; var map; var infowindo

Solution 1:

The geocoder is asynchronous, you need to set the zoom in the last callback to run. Simplest fix, move the bounds.extend/fitBounds into the callback and make the bounds global:

bounds.extend(results[0].geometry.location);
geocodedResults++;
if (geocodedResults >= (addresses.length - 1)) map.fitBounds(bounds);

updated initialize function:

function initialize() {
    var centerMap = new google.maps.LatLng(45.3517923, 6.3101660);

    geocoder = new google.maps.Geocoder();
    addresses = ["New York, NY", "Newark, NJ", "Philadelphia, PA"];

    for (var i = 0; i < addresses.length; i++) {
        var address = addresses[i];
        geocoder.geocode({
            'address': address
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);

                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                var tmpAddress = results[0].formatted_address;

                tmpAddress = tmpAddress.split(',');
                theMarkers.push([tmpAddress[0], results[0].geometry.location.lat(), results[0].geometry.location.lng(), i, 'This location is ' + tmpAddress[0]]);
                bounds.extend(results[0].geometry.location);
                geocodedResults++;
                if (geocodedResults >= (addresses.length - 1)) map.fitBounds(bounds);
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

    var mapOptions = {
        zoom: 0,
        center: centerMap,
        panControl: false,
        zoomControl: false,
        scaleControl: false,
        streetViewControl: false,
        mapTypeControl: false
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    setMarkers(map, theMarkers);

    infowindow = new google.maps.InfoWindow({
        content: "Loading..."
    });
}

working fiddle

code snippet:

var map;
var bounds = new google.maps.LatLngBounds();
var infowindow = null;
var addresses = [];
var theMarkers = [];
var geocodedResults = 0;

functiongeocodeAddress(address, i) {
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);

      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });

      var tmpAddress = results[0].formatted_address;

      tmpAddress = tmpAddress.split(',');
      theMarkers.push([tmpAddress[0], results[0].geometry.location.lat(), results[0].geometry.location.lng(), i, 'This location is ' + tmpAddress[0]]);
      bounds.extend(results[0].geometry.location);
      geocodedResults++;
      if (geocodedResults >= (addresses.length - 1))
        map.fitBounds(bounds);
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

functioninitialize() {
  var centerMap = new google.maps.LatLng(45.3517923, 6.3101660);

  geocoder = new google.maps.Geocoder();
  addresses = ["New York, NY", "Newark, NJ", "Philadelphia, PA"];

  for (var i = 0; i < addresses.length; i++) {
    var address = addresses[i];
    geocodeAddress(address, i);
  }

  var mapOptions = {
    zoom: 0,
    center: centerMap,
    panControl: false,
    zoomControl: false,
    scaleControl: false,
    streetViewControl: false,
    mapTypeControl: false
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  // setZoom(map, theMarkers);setMarkers(map, theMarkers);

  infowindow = new google.maps.InfoWindow({
    content: "Loading..."
  });
}

functionsetZoom(map, markers) {
  var boundbox = new google.maps.LatLngBounds();

  for (var i = 0; i < markers.length; i++) {
    boundbox.extend(new google.maps.LatLng(markers[i][1], markers[i][2]));
  }

  map.setCenter(boundbox.getCenter());
  map.fitBounds(boundbox);
}

functionsetMarkers(map, markers) {
  for (var i = 0; i < markers.length; i++) {
    var site = markers[i];
    var siteLatLng = new google.maps.LatLng(site[1], site[2]);
    var marker = new google.maps.Marker({
      position: siteLatLng,
      map: map,
      title: site[0],
      zIndex: site[3],
      html: site[4],
      draggable: false,
      //Markers drop on the mapanimation: google.maps.Animation.DROP
    });

    google.maps.event.addListener(marker, "click", function() {
      infowindow.setContent(this.html);
      infowindow.open(map, this);
      //marker.setAnimation(google.maps.Animation.BOUNCE);
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

<scriptsrc="http://maps.googleapis.com/maps/api/js"></script><divid="map-canvas"style="height: 500px; width:500px;"></div>