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

Post a Comment

Popular posts from this blog

php - Submit Form Data without Reloading page -

i know question has been asked , answered bunch of times life of me can not solution work on code. believe if redo code, work properly, , in retrospect time i've spent on issue should have redone code...but beyond deadline , have working prototype up... can advise how update multiple forms on single page without reloading page? horrible @ php , complete noob js/jquery/ajax @ best. html/php in single file , believe causing me problems/is largest obstacle @ getting ajax form processing work. basically, want users to: select teams multiple dropdowns in form group 1 (league champs) , on update update db newly selected team without reloadding page. edit team scores per match , on score submit/update, update db new scores. for each requirement there multiple forms (1 each leagues, 1 each per match) have set class on each form id. everything works via php, form submission reloads page each time submitted , not ideal. i have tried ajax code here http://scotch.io/tutoria...
Read more

linux - Rails running on virtual machine in Windows -

the reason why want switch ubuntu people said gems works better on linux on windows. i don't want macbook pro rails development since love windows , cannot stand lack of apps mac. moreover, people saying ubuntu "better" mac: http://www.reddit.com/r/ubuntu/comments/1bgj1s/are_there_advantages_of_ubuntu_over_os_x_for/ does virtual box work enough doesn't have lag @ all? using i7-3517u cpu 8gb memory. need program in environment lag-free , not sluggish. or there alternatives recommend? i unsure permission settings or complicated stuffs regarding terminal. i'll using terminal develop. i'm still quite new here development in linux. please kind me >< thanks. @holyxiaoxin pretty sure should asking on superuser instead. nevertheless, suggest install ubuntu in partition instead of running virtual machine. here's guide https://help.ubuntu.com/community/windowsdualboot also, yes. developing in virtual machine accurate, @ end experiment w...
Read more