Google Maps: Get a variable value from listener

Question

I'm trying to do it in good way, but I can't.. Please tell me where is the problem.

Variable latlng is empty outside the jsondata.addListener.. I want to pass the latlng variable to:

var latlngbounds = new google.maps.LatLngBounds();
latlng.each(function(n){
   latlngbounds.extend(n);
});

But it doesn`t work..

This is my code:

<script>
var map;
var jsondata;
var marker;
var latlng=[];
function initMap() {

map = new google.maps.Map(document.getElementById('gmap'), {
zoom: 9,
center: {lat: 51.431635, lng: 12.3198106},
mapTypeControl: false 
});

jsondata=new google.maps.Data();
jsondata.loadGeoJson('/resources/geojson/all.geojson');

jsondata.setStyle({
  strokeColor: '#000000',
  fillColor: '#000000',
  strokeWeight: 1,
  fillOpacity:0.5,
  zIndex:999
 });
var i=0;

jsondata.addListener('addfeature', function(event) {
  var symbol=event.feature.getProperty('SYMBOL');

 marker = new google.maps.Marker({
        position: event.feature.getGeometry().getArray()[0]["j"][0]["j"][0],
        label: "S"+symbol,
        map: map
      });

    var myLatLng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
        latlng[i++]=myLatLng;                       
});

**//alert(latlng);**

var latlngbounds = new google.maps.LatLngBounds();
latlng.each(function(n){
   latlngbounds.extend(n);
});

map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);

jsondata.setMap(map);


};
</script>

Answer 1

You are trying to access the latlng array before it is populated (the .loadGeoJson method is asynchronous, it takes time for the data to be retrieved from the server). Better to add the marker positions to the latlngbounds object when you create them (rather than doing it in a separate loop).

  jsondata.addListener('addfeature', function(event) {
    var marker = new google.maps.Marker({
      position: event.feature.getGeometry().get(),
      label: event.feature.getProperty("name"),
      title: event.feature.getProperty("name"),
      map: map
    });

    latlngbounds.extend(marker.position);
    map.fitBounds(latlngbounds);
  });

code snippet:

var map;
var jsondata;
var marker;
var latlng = [];

function initMap() {
  map = new google.maps.Map(document.getElementById('gmap'), {
    zoom: 9,
    center: {
      lat: 51.431635,
      lng: 12.3198106
    },
    mapTypeControl: false
  });

  jsondata = new google.maps.Data();

  jsondata.setStyle({
    strokeColor: '#000000',
    fillColor: '#000000',
    strokeWeight: 1,
    fillOpacity: 0.5,
    zIndex: 999
  });

  var latlngbounds = new google.maps.LatLngBounds();
  jsondata.addListener('addfeature', function(event) {

    var marker = new google.maps.Marker({
      position: event.feature.getGeometry().get(),
      label: event.feature.getProperty("name"),
      title: event.feature.getProperty("name"),
      map: map
    });

    latlngbounds.extend(marker.position);
    map.fitBounds(latlngbounds);

  });
  jsondata.addGeoJson(geoJson);
  jsondata.setMap(map);
};
google.maps.event.addDomListener(window, 'load', initMap);
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [13.4795, 52.4215]
    },
    "properties": {
      "file": "berlin_germany.geojson",
      "name": "Berlin, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [6.728, 51.4465]
    },
    "properties": {
      "file": "duisburg_germany.geojson",
      "name": "Duisburg, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [8.6265, 50.0395]
    },
    "properties": {
      "file": "frankfurt_germany.geojson",
      "name": "Frankfurt, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [10.027, 53.496]
    },
    "properties": {
      "file": "hamburg_germany.geojson",
      "name": "Hamburg, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [8.8195, 53.2625]
    },
    "properties": {
      "file": "bremen_germany.geojson",
      "name": "Bremen, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [6.8155, 51.2385]
    },
    "properties": {
      "file": "duesseldorf_germany.geojson",
      "name": "Duesseldorf, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [11.018, 49.488]
    },
    "properties": {
      "file": "nuremberg_germany.geojson",
      "name": "Nuremberg, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [8.3545, 48.988]
    },
    "properties": {
      "file": "karlsruhe_germany.geojson",
      "name": "Karlsruhe, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [13.779, 51.079]
    },
    "properties": {
      "file": "dresden_germany.geojson",
      "name": "Dresden, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [12.3895, 51.343]
    },
    "properties": {
      "file": "leipzig_germany.geojson",
      "name": "Leipzig, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [8.731, 50.808]
    },
    "properties": {
      "file": "marburg_germany.geojson",
      "name": "Marburg, Germany"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [11.4885, 48.12]
    },
    "properties": {
      "file": "munich_germany.geojson",
      "name": "Munich, Germany"
    }
  }]
};

html,
body,
#gmap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="gmap"></div>