Forum | Appery.io

Can I add push pins to a map in appery.io? Also when I click on the push pin, I should be able to navigate to another screen. Is that possible?

Hi Jyotsna,

Please take a look at here:
http://docs.appery.io/tutorials/addin...

hi katya... I have tried using the above link. Here, when we put markers in map, we cannot click on the marker and navigate to any other page. So is there any way to click on the marker and navigate to another screen?

Hi Jyotsna,

Here is the sample code to navigate to URL:
codevar marker = new google.maps.Marker({
url: 'http://www.google.com/',
map: map
});

google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});/code

Here is how to navigate between Appery.io pages: http://docs.appery.io/javascript-api/...

Thanks Katya. But I have tried all of these but couldn't get the required output. The issue is, when I click on the marker, the map is getting zoomed in instead of navigating to another page.

Hi Jyotsna,

You probably missed something in a marker. Try the following code please:
codevar myOptions = {
zoom :8,
center: new google.maps.LatLng(37.63, -122.424),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map($('div[dsid="googlemap1"]').get(0), myOptions);

//San Francisco, with custom marker
var sfLatlng = new google.maps.LatLng(37.775, -122.4183333);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "San Francisco",
url : "http://google.com",
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});/code

Thanks a lot Katya. This worked.