In setting up the Google map on my webpage, I follow this process:
var initialize = function(latitude, longitude, boundaries) {
// Using selected latitude and longitude as starting point
var myLatLng = {lat: selectedLat, lng: selectedLong};
// If the map has not been created yet...
if (!map){
// Create a new map and add it to 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 permission to use the user's real GPS location
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, so let's mark their 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);
As shown above, I attempt to pass the created map to the refreshDataOnMap method:
var refreshDataOnMap = function(long, lat, mymap) {
console.log("refresh!!");
var calculatedDistance = calculateRadiusInMiles(mymap);
}
This method then calls calculateRadiusInMiles:
// Get the visible 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;
};
Upon checking the console, I receive the following information:
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!!
Due to this error, I am unable to properly utilize the map on my page. It seems like the map loads after attempting to call its properties, but how can I prevent this issue?
Thank you for any insights.
EDIT===========
One important detail worth mentioning for debugging purposes:
The Google map is initially loaded and centered based on the user's IP address, but once the browser detects GPS data, the map reloads and focuses on that specific GPS point. That explains why you see refresh!!! printed twice in the console log.