Google Map marker customization

[Deon]

Hi

Do you have any info on.....

1. How to customize markers on a Google map and how to make them clickable.

   I need to be able to identify a marker. Right now all markers look the same and mean nothing. I then need to click on a marker that will take me to the associated page.

   Thank you

[Yurii Orishchuk]

Hi Deon.

Sure, you can.

You can set for marker many of fields like:

title, shape, icon etc.

See more about it here: https://developers.google.com/maps/do...

To set event handler for "click" marker event you can use following code:

pre
code

var onMarkerClick = function(){
alert("Marker click");
};

//Where - markers - is your marker.
google.maps.event.addListener(marker, 'click', onMarkerClick);

/code
/pre

Regards.

[Deon]

Thank you. works perfectly.

[Deon]

All the marker settings are based on static content. I need to have the title, infoWindow populated by data from the collection. Are there any examples of how to accomplish this?

Thank you

[Evgene Karachevtsev]

Hello,

Please look at this tutorial: http://docs.appery.io/tutorials/using...

[Deon]

I have. It does not explain how to map db cols to the marker or an infowindow

[Yurii Orishchuk]

Hi Deon.

Here is a brief plan for your goals:

1 Create list datasource for collection you need.

2 Open events bottom panel in "data" page mode and add "success" js event handler with following code:

pre
code

Code: Select all

 //Note: you should to replace "google_map" with your map component name. 
 var mapName = "google_map&quot 

 var map = Appery(mapName).options.mapElement.gmap('get', 'map'); 

 var markers = data; 

 var contentString = "Text Text&quot 

 var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
 }); 

 for (i = 0; i < markers&#46;length; i++) { 

     &#47;&#47;Note - you should change this line below in accordance with your data&#46; 
     var title = markers[i]&#46;title; 

     marker = new google&#46;maps&#46;Marker({ 
         position: new google&#46;maps&#46;LatLng(locationHelper&#46;aLocations[i][0], locationHelper&#46;aLocations[i][1]), 
         map: map, 
         draggable: true, 

         title: title 
     }); 

     &#47;&#47;Add event handler and open infoWindow 
     google&#46;maps&#46;event&#46;addListener(marker, 'click', function() { 
         infowindow&#46;open(map, marker); 
     }); 

 }; 

 Appery(mapName)&#46;refresh() 

/code
/pre

Regards

[Deon]

Thank you. I will have a look at it.
Kind Regards
Deon

[Evgene Karachevtsev]

Hello Deon,

Thank you for the update. Do not hesitate to contact us if you need any further help.