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

Question

This is how I construct the google map on my page:

var initialize = function(latitude, longitude, boundaries) {

            // Uses the selected lat, long as starting point
            var myLatLng = {lat: selectedLat, lng: selectedLong};

            // If map has not been created...
            if (!map){
                // Create a new map and place in the index.html page
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 12,
                    center: myLatLng
                });
            }

            if(boundaries.length > 0){
                //we don't have a permission for using real GPS of the 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 a permission, let's mark his location with a marker
                // Set initial location as a 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 as you can see I try to pass the created map to the refreshDataOnMap method:

   var refreshDataOnMap = function(long, lat, mymap) {

        console.log("refresh!!");
        var calculatedDistance = calculateRadiusInMiles(mymap);
   }

and this method calls calculateRadiusInMiles :

// get the viewable map radius
        var calculateRadiusInMiles = function(map){

            var bounds = map.getBounds();

            var center = bounds.getCenter();
            var ne = bounds.getNorthEast();

            // r = radius of the earth in statute miles
            var r = 3963.0;

            // Convert lat or lng from decimal degrees into radians (divide by 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 from center to 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 my console says:

refresh!!

angular.js:12520 TypeError: Cannot read property 'getCenter' of undefined at calculateRadiusInMiles (gservice.js:112) at refreshDataOnMap (gservice.js:48) at initialize (gservice.js:214) at Object.googleMapService.refresh (gservice.js:36) at Object. (gservice.js:225) at Object.invoke (angular.js:4523) at Object.enforcedReturnValue [as $get] (angular.js:4375) at Object.invoke (angular.js:4523) at angular.js:4340 at 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 I cannot use the map on my page properly. I don't know what might be wrong here, for me it looks like the map loads after I try to call its properties, but - if that's correct - how can I prevent it?

Thanks

EDIT===========

one detail here since it might be useful to debug this problem:

I load the google map and center it based on user ip address, but then when the browser detects the gps data then the map reloads and point to the specific gps point. That's why in my console.log you can see the refresh!!! twice

Answer 1

It must be that bounds is undefined, so map is not (yet) valid. Have you checked map when it's passed to calculateRadiusInMiles() ? Have you checked bounds ? Has the map already loaded?

Google Maps Api v3 - getBounds is undefined

Edit to spoon-feed:

It looks like there's an event in v3 for exactly this:

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

or

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