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