title: Why am I getting Cannot read property 'getCenter' of undefined when trying to access my embed google map?
body: <p>This is how I construct the google map on my page:</p>
  
  <pre><code>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 &gt; 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);
  </code></pre>
  
  <p>and as you can see I try to pass the created map to the <code>refreshDataOnMap</code> method:</p>
  
  <pre><code>   var refreshDataOnMap = function(long, lat, mymap) {
  
          console.log("refresh!!");
          var calculatedDistance = calculateRadiusInMiles(mymap);
     }
  </code></pre>
  
  <p>and this method calls <code>calculateRadiusInMiles</code>:</p>
  
  <pre><code>// 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;
          };
  </code></pre>
  
  <p>The result in my console says:</p>
  
  <blockquote>
    <p>refresh!!</p>
    
    <p>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</p>
    
    <p>refresh!!</p>
  </blockquote>
  
  <p>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?</p>
  
  <p>Thanks</p>
  
  <p>EDIT===========</p>
  
  <p>one detail here since it might be useful to debug this problem:</p>
  
  <p>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 <code>refresh!!!</code> twice</p>