Hi i have a map that shows multiple points of interest (poi) in a given city.
I followed this tutorial successfully but I would like to map these poi's from a collection in my appery database. Also each city has a different number of poi's.
http://devcenter.appery.io/tutorials/...
How would I do this?
Hello Joe,
Please look at this tutorial, it should be useful for you: http://devcenter.appery.io/tutorials/...
Hi,
I tried this but I wanted to map it to the map component rather than a collapsable block.
I tried this and it didnt work.
How do I map multiple makers to a map component?
Hi Joe,
You can use following code to add markers on the page:
pre
var map = Appery("mapName").options.mapElement.gmap('get', 'map');
var markerLatLng = new google.maps.LatLng(localStorage.getItem('markerLat'), localStorage.getItem('markerLng'));
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
title: "marker title",
animation: google.maps.Animation.DROP
});
/pre
More details about how to work with google map api here: http://devcenter.appery.io/tutorials/...
Regards.
Hi Yurii,
Thank you, this helped massively.
I have another question regarding directions.
the JS is:
prevar directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
console.log('Initializing...');
Code: Select all
map = Apperyio("google_map").gmap;
if (!map)
{
setDelay();
}
else
{
directionsDisplay = new google.maps.DirectionsRenderer();
} }
function displayDirections(sourceAddress, destinationAddress, map) {
var request = {
origin: sourceAddress,
destination: destinationAddress,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
directionsDisplay.setMap(map);
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
alert("Directions query unsuccessful. Response status: " + status);
}
});
}
function setDelay()
{
setTimeout(initialize, 50);
}/pre
and the js on button click is:
prevar sourceAddress = Apperyio("from").val();
var destinationAddress = Apperyio("to").val();
displayDirections(sourceAddress, destinationAddress, map);/pre
the source address and destination address I have is saved in local storage.
GeoLat, GeoLng and DestLat, DestLng.
so I changed the code to this:
prevar sourceAddress = (localStorage.getItem('GeoLat'), localStorage.getItem('GeoLng'));
var destinationAddress = (localStorage.getItem('DestLat'), localStorage.getItem('DestLng'));
displayDirections(sourceAddress, destinationAddress, map);/pre
But this didnt work.
How can I fix this?
Cheers,
Joe
Hi Joe,
I can not see whether you run "initialize" method before press button. For example you should do it on "page show" event.
Also please change following JS line:
pre
map = Apperyio("google_map").gmap;
/pre
With:
pre
var map = Appery("google_map").options.mapElement.gmap('get', 'map');
/pre
Don't forget to check name of the google map component: "google_map".
Regards.
yes initialize method is run on page show.
I changed the code as you said and when I tested it it failed to place markers.
The error in the console is:
preUncaught TypeError: Cannot read property 'fitBounds' of undefinedLogin.js:3133 TransportTest_js.window.geolocationTransport.Apperyio.datasources.geolocationTransport.Apperyio.DataSource.onSuccessappery.js:361 Apperyio.DataSource.$a.createClass.__successHandlerjquery-1.9.1.js:818 proxyappery.js:819 (anonymous function)/pre
JS on geolocationTransport success:
prevar markerLatLng = new google.maps.LatLng(localStorage.getItem('GeoLat'), localStorage.getItem('GeoLng'));
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: "http://i.imgur.com/QtWkT.png",
animation: google.maps.Animation.DROP
});
bounds.extend(markerLatLng);
map.fitBounds(bounds);/pre
on button click, using this original code, and entering latitude and longitude values in the inputs it worked fine:
prevar sourceAddress = Apperyio("from").val();
var destinationAddress = Apperyio("to").val();
displayDirections(sourceAddress, destinationAddress, map);/pre
I can't seem to find the problem in this code:
prevar sourceAddress = (localStorage.getItem('GeoLat')," ", localStorage.getItem('GeoLng'));
var destinationAddress = (localStorage.getItem('DestinationAddress'));
displayDirections(sourceAddress, destinationAddress, map);
localStorage.setItem('GeoLatLng', sourceAddress);/pre
As a test I added the last line of the code, the LSV GeoLatLng after button click is show just the GeoLng text.
So the code for the sourceAddress variable is not how I want it.
what would be the right code?
I've managed to find a usable work around:
on button click
preApperyio("from").val([localStorage.getItem('GeoLat'), localStorage.getItem ('GeoLng')]);
Apperyio("to").val(localStorage.getItem('DestinationAddress'));
var sourceAddress = Apperyio("from").val();
var destinationAddress = Apperyio("to").val();
displayDirections(sourceAddress, destinationAddress, map);/pre
This works fine as I can uncheck the visibility for 'from' and 'to' inputs.
Hello Joe,
Thank you for the update. This is an elegant solution, glad it works.