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
Post a Comment