<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GEOLOCALIZACION</title>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="gmaps.js"></script>
<link rel="stylesheet" type="text/css" href="mypath.css"/>
<script type="text/javascript">
var map, lat, lng;
// variables definidas por mi
var aux_contador = 0;
var latitudes = new Array();
var longitudes = new Array();
var coordenadas = new Array();
$(function(){
// variables locales
localStorage.contador = (localStorage.contador || 0);
localStorage.coordenadas = (localStorage.coordenadas || 0);
function enlazarMarcador(e){//alert("Dibuja ruta estre marcadores");
// almacenamos las veces que se hace click sobre el mapa
aux_contador = aux_contador + 1;
localStorage.contador = aux_contador;
// almacenamos las latitudnges y longitudes
latitudes[aux_contador - 1] = lat;
longitudes[aux_contador - 1] = lng;
coordenadas[aux_contador - 1, aux_contador - 1] = [latitudes[aux_contador - 1], longitudes[aux_contador - 1]];
localStorage.coordenadas = JSON.stringify(coordenadas);
// muestra ruta entre marcas anteriores y actuales
map.drawRoute({ origin: [lat, lng], // origen en coordenadas anteriores
// destino en coordenadas del click o toque actual
destination: [e.latLng.lat(), e.latLng.lng()],
travelMode: 'driving',
strokeColor: '#000000',
strokeOpacity: 0.6,
strokeWeight: 5
});
lat = e.latLng.lat(); // guarda coords para marca siguiente
lng = e.latLng.lng();
map.addMarker({ lat: lat, lng: lng}); // pone marcador en mapa
};
function geolocalizar(){GMaps.geolocate({ success: function(position)
{lat = position.coords.latitude; // guarda coords en lat y lng
lng = position.coords.longitude;
map = new GMaps({ // muestra mapa centrado en coords [lat, lng]
el: '#map',
lat: lat,
lng: lng,
click: enlazarMarcador,
tap: enlazarMarcador});
map.addMarker({ lat: lat, lng: lng}); // marcador en [lat, lng]
},
error: function(error) { alert('Geolocalizaci��n falla: '+error.message); },not_supported: function(){ alert("Su navegador no soporta geolocalizaci��n"); },});
};
function borrado()
{localStorage.clear();
geolocalizar();
};
$("#inicializar").on('click', function(){ borrado();});
if (+localStorage.contador > 0)
{contador = +localStorage.contador;
coordenadas = JSON.parse(localStorage.coordenadas);
for (i=0;i<contador;i++)
{if (i=0)
{geolocalizar();
}
else
{map.drawRoute({// origen en coordenadas anteriores
origin: [lat, lng],
// destino en coordenadas del click o toque actual
destination: [coordenadas[i][0], coordenadas[i][1]],
travelMode: 'driving',
strokeColor: '#000000',
strokeOpacity: 0.6,
strokeWeight: 5});
lat = coordenadas[i][0]; // guarda coords para marca siguiente
lng = coordenadas[i][1];
map.addMarker({ lat: lat, lng: lng}); // pone marcador en mapa
}
}
}
else
{geolocalizar();
}
});
</script>
</head>
<body>
<div align="center">
<a>Geolocalizaci��n </a><button type="button" id="inicializar"> Inicializar Mapa </button>
</div>
<div id="map"></div>
</body>
</html>
