I have a JQM page with a map component and a html panel to display directions. If I run the page by setting it as the starting page it functions correctly. If I navigate toi that page from another the map is not rendered correctly.
If I refresh the page, the map then renders as it should.
First Time:
After Refreshing browser:
Hi Terry and Happy Tuesday,
Generally speaking - calls out to the Google API take time... and although I'm not positive - and don't know your use case entirely - what's likely happening is the API call is still running - and your page is displaying....
What you should be sensing is if !Appery('nameofMap').gmap (ie the object is not complete) - the run a setTimeOut function to 'hang out and wait' - and then retry to see if the map exists - and - if so - do a refresh ....
Here's a code example:(note the !map - and then the function to hang out - below...)(Sorry about the extra code - but it's a quick cut and paste from one of our apps)
function fSetUserEventMap() {
map = Apperyio("mUserHistory").gmap;
if (!map) {
setDelay();
} else {
var bounds;
var sCurrentTimeStamp;
var oUserGpsPoints;
var nMarkerLng;
var nMarkerLat;
var oMarkerLatLng;
var oMarker;
var sContent;
var sTimeStamp;
var sDateStamp;
var oGpsEventsMap = JSON.parse(fLocalGet('sGpsEventsMapData'));
bounds = new google.maps.LatLngBounds();
map.set("disableDefaultUI", true);
map.set("zoomControl", true);
map.setMapTypeId('hybrid');
map.setTilt(0);
oUserGpsHistory = oGpsEventsMap;
for (var i = 0; i < oUserGpsHistory.length; i++) {
nMarkerLng = oUserGpsHistory.location[0];
nMarkerLat = oUserGpsHistory.location[1];
oMarkerLatLng = new google.maps.LatLng(nMarkerLat, nMarkerLng);
sCurrentTimeStamp = oUserGpsHistory.timestamp;
sTimeStamp = fDisplayTimeSatus(sCurrentTimeStamp, 'time');
sDateStamp = fDisplayTimeSatus(sCurrentTimeStamp, 'date');
sContent = (i + 1).toString() + "." + " " + sDateStamp + ' ' + sTimeStamp;
sContent2 = '' + (i + 1).toString() + "." + '' + '' + " Time: " + '' + '' + sDateStamp + ', ' + sTimeStamp + '' + '' + 'Location: ' + '' + '' + nMarkerLat + ', ' + nMarkerLng + '' + '' + ' Speed: ' + '' + '' + Math.round(oUserGpsHistory.speed) + '' + '' + ' Accuracy: ' + '' + '' + oUserGpsHistory.accuracy + '';
//create your marker
oStyleIcon = new StyledIcon(StyledIconTypes.MARKER, {
color: 'ffffff',
text: sContent
});
//create your marker
oMarker = new StyledMarker({
styleIcon: oStyleIcon,
position: oMarkerLatLng,
map: map,
draggable: false,
title: sContent,
});
var infowindow = new google.maps.InfoWindow({
content: sContent2
});
fAttachInfoWindow(map, oMarker, infowindow);
aMarkers.push(oMarker); // markers are now stored in the array aMarkers
bounds.extend(aMarkers.getPosition()); // make sure the bounds shows all markers
map.fitBounds(bounds); // now adjust the view
map.panToBounds(bounds); // pan to the new bounds
google.maps.event.addListener(oMarker, 'dblclick', function() {
this.map.setZoom(16);
});
} ///end of for loop
serviceFacilitiesOnGpsMap.execute();
} //end of else statemenT
return true;
}
function setDelay() {
setTimeout(fSetUserEventMap, 50);
}
Yes, I have something like that based on Appery.io sample code and initialize() is called on page load event:
prevar map;
var panel;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var bounds = new google.maps.LatLngBounds();
function initialize() {
console.log('Initializing...');
Code: Select all
map = Apperyio("google_map").gmap;
if (!map) {
setDelay();
} else {
directionsDisplay = new google.maps.DirectionsRenderer();
}
panel = Apperyio("google_panel")[0]; }
function displayDirections(sourceAddress, destinationAddress) {
if (sourceAddress === "Current Location") {
var currentLatitude = parseFloat(Apperyio.storage.currentLat.get());
var currentLongitude = parseFloat(Apperyio.storage.currentLng.get());
sourceAddress = new google.maps.LatLng(currentLatitude, currentLongitude);
}
var request = {
origin: sourceAddress,
destination: destinationAddress,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
directionsDisplay.setPanel(panel);
directionsDisplay.setMap(map);
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
alert("Directions query unsuccessful. Response status: " + status);
}
});
}
function setDelay() {
setTimeout(initialize, 50);
}/pre
It is something to do with map not being defined though as the console is throwing up an error on the following line (cannot read property setCenter of undefined:
map.setCenter(markerLatLng);
So it appears that the delay doesn't help
I tried the following for initialize() thinking that that map map would eventually have a value and drop out of the while loop, but it sticks in an infinite loop;
function initialize() {
console.log('Initializing...');
Code: Select all
map = Apperyio("google_map").gmap;
while (!map) {}
//if (!map) {
// setDelay();
//} else {
// directionsDisplay = new google.maps.DirectionsRenderer();
//}
directionsDisplay = new google.maps.DirectionsRenderer();
panel = Apperyio("google_panel")[0]; }
My Current initialize function:
prefunction initialize() {
console.log('Initializing...');
Code: Select all
map = Apperyio("google_map").gmap;
if (!map) {
setDelay();
} else {
console.log("map has a value!");
directionsDisplay = new google.maps.DirectionsRenderer();
panel = Apperyio("google_panel")[0];
console.log("Initialization Complete!")
} }
function setDelay() {
setTimeout(initialize, 50);
}/pre
I am now sure that map is being set (I have added breakpoints and checked the values).
The console shows the following errors, although we can see that thses errors occur whilst it is still trying to initialize:
Are these errors part of the normal initialization loop, as they appear to occur during the process of initialization? I notice that the last time through the loop the errors do not occur.
Found a solution:
google.maps.event.trigger(map, 'resize');
I added this to the page show event which forced the map to re-render correctly