javascript - Why am I getting Cannot read property 'getCenter' of undefined when trying to access my embed google map? -


this how construct google map on page:

var initialize = function(latitude, longitude, boundaries) {              // uses selected lat, long starting point             var mylatlng = {lat: selectedlat, lng: selectedlong};              // if map has not been created...             if (!map){                 // create new map , place in index.html page                 var map = new google.maps.map(document.getelementbyid('map'), {                     zoom: 12,                     center: mylatlng                 });             }              if(boundaries.length > 0){                 //we don't have permission using real gps of user                 var bounds = new google.maps.latlngbounds(                     new google.maps.latlng(boundaries[0], boundaries[1]),                     new google.maps.latlng(boundaries[2], boundaries[3]) );                  map.fitbounds(bounds);             }else{                 //we have permission, let's mark location marker                 // set initial location bouncing red marker                 var initiallocation = new google.maps.latlng(latitude, longitude);                  var marker = new google.maps.marker({                     position: initiallocation,                     animation: google.maps.animation.bounce,                     map: map,                     icon: 'http://www.google.com/mapfiles/dd-start.png'//'http://maps.google.com/mapfiles/ms/icons/red-dot.png'                 });                 //lastmarker = marker;              }               refreshdataonmap(longitude, latitude, map); 

and can see try pass created map refreshdataonmap method:

   var refreshdataonmap = function(long, lat, mymap) {          console.log("refresh!!");         var calculateddistance = calculateradiusinmiles(mymap);    } 

and method calls calculateradiusinmiles:

// viewable map radius         var calculateradiusinmiles = function(map){              var bounds = map.getbounds();              var center = bounds.getcenter();             var ne = bounds.getnortheast();              // r = radius of earth in statute miles             var r = 3963.0;              // convert lat or lng decimal degrees radians (divide 57.2958)             var lat1 = center.lat() / 57.2958;             var lon1 = center.lng() / 57.2958;             var lat2 = ne.lat() / 57.2958;             var lon2 = ne.lng() / 57.2958;              // distance = circle radius center northeast corner of bounds             var dis = r * math.acos(math.sin(lat1) * math.sin(lat2) +                     math.cos(lat1) * math.cos(lat2) * math.cos(lon2 - lon1));             return dis;         }; 

the result in console says:

refresh!!

angular.js:12520 typeerror: cannot read property 'getcenter' of undefined @ calculateradiusinmiles (gservice.js:112) @ refreshdataonmap (gservice.js:48) @ initialize (gservice.js:214) @ object.googlemapservice.refresh (gservice.js:36) @ object. (gservice.js:225) @ object.invoke (angular.js:4523) @ object.enforcedreturnvalue [as $get] (angular.js:4375) @ object.invoke (angular.js:4523) @ angular.js:4340 @ getservice (angular.js:4482)(anonymous function) @ angular.js:12520(anonymous function) @ angular.js:9292scope.$apply @ angular.js:16157bootstrapapply @ angular.js:1679invoke @ angular.js:4523dobootstrap @ angular.js:1677bootstrap @ angular.js:1697angularinit @ angular.js:1591(anonymous function) @ angular.js:29013fire @ jquery.js:3182self.firewith @ jquery.js:3312jquery.extend.ready @ jquery.js:3531completed @ jquery.js:3547

refresh!!

and therefore cannot use map on page properly. don't know might wrong here, me looks map loads after try call properties, - if that's correct - how can prevent it?

thanks

edit===========

one detail here since might useful debug problem:

i load google map , center based on user ip address, when browser detects gps data map reloads , point specific gps point. that's why in console.log can see refresh!!! twice

it must bounds undefined, map not (yet) valid. have checked map when it's passed calculateradiusinmiles()? have checked bounds? has map loaded?

google maps api v3 - getbounds undefined

edit spoon-feed:

it looks there's event in v3 this:

`google.maps.event.addlistener(map, 'bounds_changed', function() {      alert(map.getbounds()); }); 

or

`google.maps.event.addlistener(map, 'idle', function() {      alert(map.getbounds()); }); 

Comments