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