Hello good afternoon and many thanks in advance.
I am trying to create a website where a point indicating my position appears in real time.
The code of the end that I created, I think it does what I expect. But after trying several browsers I can not get a check.
-
Chrome: When loading, the bookmark appears with my position. But if I move, it does not update. In order for this to happen, I must change the browser tab and return if you update.
-
Opera and firefox: If you update without changing the tab but they ask me for the location permissions continuously. Which does not create a good user experience.
-
App cordova: It just does not update. The first position I have is the one that holds.
For all this I'm using the google javascript API and the basic web languages.
I leave the code.
var map;
var marker;
var markerN;
var styles = [
{
featureType: 'poi.business',
elementType: 'labels',
"stylers": [
{ "visibility": "off" }
]
}
];
function initMap(){
//creamos un objeto styledMap utilizando la definicion anterior
var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
var myLatlng = new google.maps.LatLng(38.8685452,-6.97);
var map = new google.maps.Map(document.getElementById('map'), {
center: myLatlng,
zoom: 15,
styles: [
{
featureType: 'poi.business',
elementType: 'labels',
"stylers": [
{ "visibility": "off" }
]
}
]
});
//var infoWindow = new google.maps.InfoWindow({});
var image='URL donde se encuentra la imagen del punto a usar';
var pos = {
lat: 38.864749,
lng: -6.991760
};
var markerN = new google.maps.Marker({
position: pos,
map: map,
draggable:false,
icon: image
});
var timempoEn=5000;
//window.addEventListener('load', inicio(markerN,map), false);
//Invonco cada 5 segundo la llamada a un nuevo marcador para dar mi posición.
setTimeout(function(){inicio()} ,timempoEn);
$.ajax({
type: "GET",
url: "URL de mi servidor",
dataType: "text",
success: function Marcador(data){
$(data).find('marker').each(function(){
var $marker=$(this);
var name=$marker.attr("name");
var point = new google.maps.LatLng(
parseFloat($marker.attr("lat")),
parseFloat($marker.attr("lng"))
);
var marker = new google.maps.Marker({
map: map,
position: point,
draggable:false
});
});
}
});
$("#NuevoLocal").click(function(){
//console.log("dsfdsfsdfsdfsdf");
var IntoMarck = navigator.geolocation.getCurrentPosition(function(position){
var posl = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var marker = new google.maps.Marker({
map: map,
position: posl,
draggable:false,
animation: google.maps.Animation.DROP
});
});
});
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.')
}
//var localizacion= navigator.geolocation.getCurrentPosition();
function inicio(){
//if (navigator.geolocation) {
var watch_id = navigator.geolocation.watchPosition(function(position){
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
//markerN.setMap(null);
markerN = new google.maps.Marker({
position: pos,
map: map,
draggable:false
// icon: image,
});
console.log("mingui");
//map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
setTimeout(function(){inicio()} ,timempoEn);
}
}
google.maps.event.addDomListener(window, 'load', initMap);
It's the first time I write in a forum. I hope it does not become difficult to read or understand and that the question is appropriate.
Again thanks in advance.