Forum | Appery.io

Hello,

I put the code in the tutorial so I locate, but it does not work. After I put the code from Google, and if that I find, but it does open the screen (load), but I would like me to locate when I click on the button. The code is as follows:

var map;

function initialize() {
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($('div[dsid="googlemap"]').get(0), myOptions);

// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);

var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});

map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}

function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}

var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};

var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);

Once I located by pressing the button, I put another button so that when they click it calculate me the route from my position to the beginning of the route (it is always the same point). What would be the code so that I could do this?

Thanks and regards

Hi Vicent,

Please check these topics. I suppose this is the best discussion I can recommend:
https://getsatisfaction.com/apperyio/...
https://getsatisfaction.com/apperyio/...

Hi Katya,

I have the same problem.

No geolocation works for me.

I have followed the tutorial step by step:
"Building a mobile app with Google Map and Geolocation"

This is my public link:

http://appery.io/app/mobile-frame?src...

The page is "Ontiruta".

Laura,

We'll take a look.

Hi Katya:

When I don't load this code in my screen "ontiruta"

My application localize me on the map and calculate me the route.

But when I charge the code not me localize or charge me the path.

This is the code;

var myOptions = {
zoom :17,
center: new google.maps.LatLng(38.8230,-0.6120),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

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

var sfLatlng = new google.maps.LatLng(38.82085, -0.61113);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Portal de San Roc",
icon: "https://api.appery.io/rest/1/db/files..."

});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto1castellano', {reverse: false});
});

var sfLatlng = new google.maps.LatLng(38.82098, -0.61119);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Palacio de la Vila",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto5castellano', {reverse: false});
});

var sfLatlng = new google.maps.LatLng(38.82074, -0.61063);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Iglesia de Santa María",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto2castellano', {reverse: false});
});

var sfLatlng = new google.maps.LatLng(38.82089, -0.61036);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Campanario de Santa María",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto3castellano', {reverse: false});
});

var sfLatlng = new google.maps.LatLng(38.82149, -0.60955);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "La Casa de Mostassaf",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto4castellano', {reverse: false});
});

var sfLatlng = new google.maps.LatLng(38.82101, -0.60965);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Casa de los Condes Torrefiel",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto6castellano', {reverse: false});
});

var sfLatlng = new google.maps.LatLng(38.82085, -0.61011);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Museo Arqueológico",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto7castellano', {reverse: false});
});

var sfLatlng = new google.maps.LatLng(38.82074, -0.61137);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Convento de las Carmelitas",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto8castellano', {reverse: false});
});

var ctaLayer = new google.maps.KmlLayer({
url: ' https://dl.dropboxusercontent.com/u/1...'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

Hello! Could you give us steps to reproduce. Please also check are there any errors in console when you load this code? Also clarify where did you put this code?

Hi Maryna:

First, I have followed the manual of geolocation, and I added a button "invoked service:geolocation 1".

Second, I load the code into the screen "Ontirutas":

ontiruta < load < run javascript

Load this code:

var myOptions = {
zoom :17,
center: new google.maps.LatLng(38.8230,-0.6120),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

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

var sfLatlng = new google.maps.LatLng(38.82085, -0.61113);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Portal de San Roc",
icon: "https://api.appery.io/rest/1/db/files..."

});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto1castellano', {reverse: false});
});

var sfLatlng = new google.maps.LatLng(38.82098, -0.61119);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Palacio de la Vila",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto5castellano', {reverse: false});
});

var sfLatlng = new google.maps.LatLng(38.82074, -0.61063);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Iglesia de Santa María",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto2castellano', {reverse: false});
});

var sfLatlng = new google.maps.LatLng(38.82089, -0.61036);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Campanario de Santa María",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto3castellano', {reverse: false});
});

var sfLatlng = new google.maps.LatLng(38.82149, -0.60955);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "La Casa de Mostassaf",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto4castellano', {reverse: false});
});

var sfLatlng = new google.maps.LatLng(38.82101, -0.60965);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Casa de los Condes Torrefiel",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto6castellano', {reverse: false});
});

var sfLatlng = new google.maps.LatLng(38.82085, -0.61011);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Museo Arqueológico",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto7castellano', {reverse: false});
});

var sfLatlng = new google.maps.LatLng(38.82074, -0.61137);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Convento de las Carmelitas",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener (marker, 'click', function () {
Appery.navigateTo ('Ontipunto8castellano', {reverse: false});
});

var ctaLayer = new google.maps.KmlLayer({
url: ' https://dl.dropboxusercontent.com/u/1...'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

Finally I create a JavaScript from rotues:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize() {
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);
}
});
}

and then:

Open Events view Ontirutas (Load eventt) select Run Javascript:
initialize();

I edit mapping, I Add js in latitude and longitude:

localStorage.setItem('longitude',value);
localStorage.setItem('latitude',value);

And then I add in the button this code:
var sourceAddress = new google.maps.LatLng(localStorage.getItem('latitude'),localStorage.getItem('longitude'));
var destinationAddress = new google.maps.LatLng(38.8667,-0.5167);
var map = Appery("googlemap").gmap;
displayDirections(sourceAddress,destinationAddress,map);

Hi Laura,

Sorry for a delay. Try initializing the map on Page Ready event instead of Page Load.

Hello Katya:

I not be where is page ready event.
Do you could help me? There is a manual?

Thaks for your help!

Hi Laura,

You can select page container in breadcrumbs. Then open Events panel - there should be the event.