Google Maps randomly crashed when enable browser's location tracking, why? - google-maps

Question

You can go to the live website to see how the problem occurred.
Steps to see the error are following
Go to the live website.
Enable you browser's location tracking.
Click one the the place name, it will open a new tab. It will display Google Map and center the map at the location that you clicked based on URL parameter.
The problem is sometimes it's not working randomly, it's showing plain grey background instead of showing the map.
If you try to refresh or click the place name again. The map might working.
But if you suddenly zoom out, it will crashed. You need to click the marker or dragging the map around, then you can zoom out with no problem.
All these problems are not occurred when you turn off the browser's location tracking.
Try it.
PS. Don't worry about 2 or 3 last digits of parameter. it has nothing
to do with this problem, I have tested it several times). The console log is not throw any errors also.
This is my code that involved when browser's location tracking is enabled. My full code is on JSFiddle.
function initialize() {
var myOptions = { zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("map"), myOptions);
var infoWindow2 = new google.maps.InfoWindow({ content: '<div style="overflow:hidden;" id="currentInfoWindow"><p>You are here !!!</p></div>' });
// Try W3C Geolocation (Preferred)
if(navigator.geolocation) { // BEGIN IF USER ENABLE
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) { //getCurrentPosition
querystring = window.location.search.substr(1);
console.log(querystring);
element = querystring.split(",");
if (querystring) {
clickedLocation = new google.maps.LatLng(element[0],element[1]);
map.setCenter(clickedLocation);
map.setZoom(18);
} else {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
}
//Set map center to be the user's location
map.setCenter(initialLocation);
//Place the marker of current position
var markerCurrent = new google.maps.Marker({
position: initialLocation,
map: map,
title:"You are here !!!",
icon : 'assets/frontend/images/yourmarker.png'
});
// Attaching a click event to the current marker
google.maps.event.addListener(markerCurrent, "click", function(e) {
infoWindow.close();
this.getMap().setCenter(this.getPosition());
map.setZoom(12);
infoWindow2.open(map, markerCurrent);
});
// IF NOT SUPPORT OR ENABLE >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
} // End getCurrentPosition
, function() { handleNoGeolocation(browserSupportFlag); });
} // END IF Browser doesn't support Geolocation
else {
//Other code here.
}

Answer 1

Currently you will never run into this branch:
else {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
}
because there is always a QUERY_STRING.
Because of that initialLocation is not set, but you use it as argument for setCenter() .
changing this line:
clickedLocation = new google.maps.LatLng(element[0],element[1]);
into
initialLocation = new google.maps.LatLng(element[0],element[1]);
...should fix it.