javascript - Google map need page refresh before showing map pins -


i have code show multiple addresses on google map.

the problem being when page first loads map shows blue sea , not geocode addresses, imagine using lat long of 0,0.

when reload page, finds addresses , shows them on map. if leave page , come it, works, imagine, due caching.

i need working , totally stumped.

any ideas?

function initialize() {      var addresses = [ '60 hednesford road cannock west midlands ws11 1dj','172 high street bloxwich west midlands ws3 3la',];      var myoptions = {         zoom: 10,         center: new google.maps.latlng(0, 0),         maptypeid: 'roadmap'     }      var map = new google.maps.map($('#map')[0], myoptions);      var markerbounds = new google.maps.latlngbounds();      var infowindow = new google.maps.infowindow();      function makeinfowindowevent(map, infowindow, marker) {         google.maps.event.addlistener(marker, 'click', function() {             infowindow.open(map, marker);         });     }      (var x = 0; x < addresses.length; x++) {         $.getjson('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {             var icon = {                  url: 'http://melbourne.cvsdevelopment.co.uk/wp-content/themes/cvs-main/assets/img/icon-map.png'             };             var p = data.results[0].geometry.location;             var latlng = new google.maps.latlng(p.lat, p.lng);             var adress = data.results[0].formatted_address;             var marker = new google.maps.marker({                 position: latlng,                 map: map,                 icon: icon             });             markerbounds.extend(latlng);             var infowindow = new google.maps.infowindow({                 content: adress             });             makeinfowindowevent(map, infowindow, marker);          });     }      map.fitbounds(markerbounds);  } google.maps.event.adddomlistener(window, 'load', initialize); 

to fix issue, call map.fitbounds in callback function asynchronous geocode operation.

working code snippet:

function initialize() {      var addresses = ['60 hednesford road cannock west midlands ws11 1dj', '172 high street bloxwich west midlands ws3 3la', ];      var myoptions = {      zoom: 10,      center: new google.maps.latlng(0, 0),      maptypeid: 'roadmap'    }      var map = new google.maps.map($('#map')[0], myoptions);      var markerbounds = new google.maps.latlngbounds();      var infowindow = new google.maps.infowindow();      function makeinfowindowevent(map, infowindow, marker) {      google.maps.event.addlistener(marker, 'click', function() {        infowindow.open(map, marker);      });    }      (var x = 0; x < addresses.length; x++) {      $.getjson('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function(data) {        var icon = {          url: 'http://melbourne.cvsdevelopment.co.uk/wp-content/themes/cvs-main/assets/img/icon-map.png'        };        var p = data.results[0].geometry.location;        var latlng = new google.maps.latlng(p.lat, p.lng);        var adress = data.results[0].formatted_address;        var marker = new google.maps.marker({          position: latlng,          map: map,          icon: icon        });        markerbounds.extend(latlng);        var infowindow = new google.maps.infowindow({          content: adress        });        makeinfowindowevent(map, infowindow, marker);        map.fitbounds(markerbounds);      });    }  }  google.maps.event.adddomlistener(window, 'load', initialize);
html,  body,  #map {    height: 100%;    width: 100%;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>  <div id="map"></div>


Comments

Popular posts from this blog

php - Submit Form Data without Reloading page -

linux - Rails running on virtual machine in Windows -

php - $params->set Array between square bracket -