Adding marker by clicking on map problem

[Dimitris Monastiriotis]

what i want to achieve is to set a listener on the click event of the map so that when the map loads to allow the user to click on it and set a marker on his preferred location. If I add the listener in the map component -click-custom javascript.
Then the user would have to click once in the map for the listener to be activated before he can place a marker.
I have tried to place the code to other event like pageshow or page load but I get an error that the map object is not defined, hence my question

rgrsd

[Kateryna Grynko]

Hi Dimitris,

Why don't you use standard Appery.io click event?
All the parameters of calling event handler are sent to function as usual. You can access them through arguments array.

[Zahhar Kirillov]

Hi Katya!

Can you give an example of map.click event?

[Kateryna Grynko]

Hi Zahhar,

You just select component, then click on Events tab, choose On Click and set needed action...

[Zahhar Kirillov]

Katya, I completely understand that
My question is about placing the marker to the tapped position.

I assumed, that "Tap" (or "Click") event on gmap object allowes me to get current coordinates in the event parameter, but seems I can get only on-screen coordinates, not gmap.LatLong.

My code is:
m = Appery('map'); //I have renamed default google map
alert(Object.keys(event)); //here I assume to see LatLong as part of event object

How can I get it without adding
google.maps.event.addListener(Appery('map').gmap, 'click', function(event) { // and here goes my code} to the screen Load event?

[Kateryna Grynko]

Zahhar,

It's considered that map component name == googlemap_2

On Page Show event run:
precodesetTimeout( function(){
var map = Appery("googlemap_2").gmap;
google.maps.event.addListener(map, 'click', function(event) {
localStorage.setItem('myPos', event.latLng);
placeMarker(event.latLng,map);
});
}, 1000);/code/pre
In JavaScript asset:
precodefunction placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.options.mapElement.gmap('addMarker', marker);
map.panTo(position);
map.options.mapElement.gmap("refresh");
}/code/pre

[Zahhar Kirillov]

Thank you, Katya.
I know this approach.

I was confused by your last reply to Dimitris, when you advised to use standard Appery.io click event on gmap object, and mentioned that " All the parameters of calling event handler are sent to function as usual. You can access them through arguments array."

Is it doable for gmap object? For me, Appery product would be more user-friendly if such obvious operation could be done more easily and straight-forward. In this example, click event on google map object should return not only container-related click properties, but as well content-specific properties.

Anyway, thank you for answers!

[Maryna Brodina]

Hello! No, standard handler for Click event doesn't perceives pushing context so it's not the same as codegoogle.maps.event.addListener(map, 'click'/code

[Poll David]

Hi, I want to ask about the code posted by Ms. Kateryna

pre
Zahhar,

It's considered that map component name == googlemap_2

On Page Show event run:
code
setTimeout( function(){
var map = Appery("googlemap_2").gmap;
google.maps.event.addListener(map, 'click', function(event) {
localStorage.setItem('myPos', event.latLng);
placeMarker(event.latLng,map);
});
}, 1000);
/code
In JavaScript asset:
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.options.mapElement.gmap('addMarker', marker);
map.panTo(position);
map.options.mapElement.gmap("refresh");
}
/pre

Is there a way to only place one marker on every click? it seems that the code places markers every time the user clicks on the map. How can I do it where the marker will just be moved?

[Yurii Orishchuk]

Hi Poll,

Yes you can discard invoking "placeMarker" function inside click event handler.

Replace this code:

pre

setTimeout( function(){
var map = Appery("googlemap_2").gmap;
google.maps.event.addListener(map, 'click', function(event) {
localStorage.setItem('myPos', event.latLng);
placeMarker(event.latLng,map);
});
}, 1000);

/pre

With following:

pre

var placedMarkers = 0;

//You can adjust count of available "clicks" to place markers here.
var availableMarkersToPlace = 1;

setTimeout( function(){

Code: Select all

 if(placedMarkers = availableMarkersToPlace) 
      return; 

 placedMarkers++; 

 var map = Appery("googlemap_2").gmap; 
 google.maps.event.addListener(map, 'click', function(event) {  
     localStorage.setItem('myPos', event.latLng);  
     placeMarker(event.latLng,map);  
 }); 

}, 1000);

/pre

Regards.