Forum | Appery.io

hello
I meet a easy question and need someone help me to solve it!
When the page show ,the google map will get the lat/lng from local storage variable.
and put the marker on the map.
do I type the wrong code for it,because the marker doesn't show on the map!
thanks for your help!

Hi -

Please use map.gmap instead of map when you creating a marker.

Illya
I use the code when the page show event.

var map = Appery('google_map');

var latiTude = localStorage.getItem('markerLat');
var longtiTude = localStorage.getItem('markerLng');

map.setProperty('latitude',latiTude);
map.setProperty('longitude',longtiTude);

var markerLatLng = new google.maps.LatLng(latiTude, longtiTude);

var marker = new google.maps.Marker({
position: markerLatLng,
map: map.gmap,
});

But the marker still not appear!!
please help me!!

Spark, If you are in the page show event ... There's no guarantee that the calls to google to create the map and the related markers have. Completed yet ....in other words your page has show. Itself in a matter of milliseconds , but the call out to the api is going on simultaneously and has not finished ... Even though your page is visible ... So ... I recommend using a setTimeout event .. Code sample forthcoming

thanks so much for your help!!!
waiting for your sample code to try it

forthcoming...in a few minutes...

Spark,

Here's the code I use to get the map - and then to add marker(s) to it....

Much like the comment above - I get my map here (so adjust your code please)

var map = Appery("google_map").options.mapElement.gmap('get', 'map'); // where 'google_map' is what you called your map in the designer ....

// Then if you're in the page show event.... I'd add code like this -- you might want to first --- set the center of your map to the lat/long of the marker perhaps...

// first things first - wait for the map.... -- please read this :

http://www.w3schools.com/jsref/met_wi...

// code to wait...in your show event...

var map = Appery("google_map").options.mapElement.gmap('get', 'map'); // where 'google_map' is what you called your map in the designer ....

do {
setTimeout( fdropMarker( map ), 500);
} while (!map);

// this will cause you to wait 500 milliseconds (.5 seconds) and then execute the function called fdropMarker( ) ...

inside the show event or in a separate JS script (my preference):

function fdropMarker( oMap ) {
// get lat and long - make sure they are numerics when retrieved.....
var nlatiTude = Number( localStorage.getItem('markerLat') );
var nlongtiTude = Number(localStorage.getItem('markerLng') ) ;
var oposition;
// if the map exists --- continue - otherwise just return until the next call when it does...
if ( oMap ){
// set the center of the map to the long and lat...
oposition = new google.maps.LatLng( nlatiTude, lnlongtiTude);
oMap.setCenter( oposition ) ;
// create the marker ...
var marker = new google.maps.Marker({
position: oposition,
map: oMap
});
// note that here - since you've called another external api - you may need to create a wait here - while the API calls process..... but - likely not....
} // end the if statement on if map exists
return ;
}

Also - if you put the function in a seperate javscript - you can set a breakpoint at the start of the function - and see what's going on step by step (again - HIGHLY recommended -- this will work wonders for you)

thanks for your advice and sample code~
let me try for it.
appreciate

Dear Bruce
so sorry for the late reply.
I went to volunteer two days ago.

when I follow your suggestion like below.
1、set the map in the page show event.

2、put the marker in the separate page show event.

but it still not working.

did I misunderstanding what your suggestion?