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.aLocations.length; i++) {
maxLatitude = locationHelper.aLocations[0] > maxLatitude ? locationHelper.aLocations[0] : maxLatitude;
minLatitude = locationHelper.aLocations[0] < minLatitude ? locationHelper.aLocations[0] : minLatitude;
maxLongitude = locationHelper.aLocations[1] > maxLongitude ? locationHelper.aLocations[1] : maxLongitude;
minLongitude = locationHelper.aLocations[1] < minLongitude ? locationHelper.aLocations[1] : minLongitude;
}
var map = new google.maps.Map(document.getElementsByName("multiGoogleMap")[0], {
zoom: 15,
center: new google.maps.LatLng((maxLatitude + minLatitude) / 2, (maxLongitude + minLongitude) / 2),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var contentString = "Text Text"
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var BindMarker = function(marker){
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);
});
};
var marker, i;
for (i = 0; i < locationHelper.aLocations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locationHelper.aLocations[0], locationHelper.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.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 = pageNagivateTo ? pageNagivateTo : "Screen10"
Apperyio.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
//Here is you should place unique pageid for each marker. Just replace "Screen10" with page id you need for this marker.
BindMarker(marker, "Screen10");
/code/pre
Regards.