Forum | Appery.io

Hi there, I've been trawling through the support documents and the Google Maps API docs but haven't been able to find what I'm looking for.

At the moment I have places displaying on my map from a database. On clicking these markers an info window appears.

Is it possible that when the user clicks on a marker, they are taken to a page that is unique to that marker?

Many Thanks in advance

Hello.

Yes you can use following code to navigate to the certain page:

pre

//Where "Screen15" is your page name you want to navigate.
var nextPage = "Screen10";
Apperyio.navigateTo(nextPage)

/pre

So in in accordance to your case you should to add this code into the marker click event handler.

For example:

pre

google.maps.event.addListener(marker, 'click', function() {
//Here is a code to specify page you want to navigate. You need to get it from marker or other way(from some data).
var nextPage = "Screen10";
Apperyio.navigateTo(nextPage)
});

/pre

Regards.

Thanks for this, I have it working in a sense, but all my markers navigate to the same 'screen 10'. At the moment I have 3 markers that I would like to take me to a specific page each after a click through.

I added the code to my 'convertAddr' results response:

code
function log2(m) {
return ((Math.log(m)) / (Math.log(2)));
};
for (var k in value.geometry) {
if (locationHelper.checkLocation(k)) {
locationHelper.aLocations.push([value.geometry.location.lat, value.geometry.location.lng]);
}
}
var maxLatitude = -90,
minLatitude = 90,
maxLongitude = -180,
minLongitude = 180;
for (i = 0; i < locationHelper&#46;aLocations&#46;length; i++) {
maxLatitude = locationHelper&#46;aLocations[0] > maxLatitude ? locationHelper&#46;aLocations[0] : maxLatitude;
minLatitude = locationHelper&#46;aLocations[0] < minLatitude ? locationHelper&#46;aLocations[0] : minLatitude;
maxLongitude = locationHelper&#46;aLocations[1] > maxLongitude ? locationHelper&#46;aLocations[1] : maxLongitude;
minLongitude = locationHelper&#46;aLocations[1] < minLongitude ? locationHelper&#46;aLocations[1] : minLongitude;
}
var map = new google&#46;maps&#46;Map(document&#46;getElementsByName("multiGoogleMap")[0], {
zoom: 15,
center: new google&#46;maps&#46;LatLng((maxLatitude + minLatitude) / 2, (maxLongitude + minLongitude) / 2),
mapTypeId: google&#46;maps&#46;MapTypeId&#46;ROADMAP
});
var contentString = "Text Text&quot
var infowindow = new google&#46;maps&#46;InfoWindow({
content: contentString
});

var BindMarker = function(marker){
google&#46;maps&#46;event&#46;addListener(marker, 'click', function() {
&#47;&#47;Here is a code to specify page you want to navigate&#46; You need to get it from marker or other way(from some data)&#46;
var nextPage = "Screen10&quot
Apperyio&#46;navigateTo(nextPage);
});
};

var marker, i;
for (i = 0; i < locationHelper&#46;aLocations&#46;length; i++) {
marker = new google&#46;maps&#46;Marker({
position: new google&#46;maps&#46;LatLng(locationHelper&#46;aLocations[0], locationHelper&#46;aLocations[1]),
map: map,
title: 'Uluru (Ayers Rock)'
});
BindMarker(marker);
};
/code

I'm guessing I'm not defining each marker properly? Really appreciate your guidance.

Thanks
Craig

Hello.

Follow these steps:

1 Modificate your BindMarker function code with:

precode

var BindMarker = function(marker, pageNagivateTo){
google&#46;maps&#46;event&#46;addListener(marker, 'click', function() {
&#47;&#47;Here is a code to specify page you want to navigate&#46; You need to get it from marker or other way(from some data)&#46;
var nextPage = pageNagivateTo ? pageNagivateTo : "Screen10&quot
Apperyio&#46;navigateTo(nextPage);
});
};

/code/pre

2 When you using BindMarker function you should to pass as second parameter pageId which is you should to navigate when you click on the marker.

precode

&#47;&#47;Here is you should place unique pageid for each marker&#46; Just replace "Screen10" with page id you need for this marker&#46;
BindMarker(marker, "Screen10");

/code/pre

Regards.