Conseguir eliminar los markets en Google maps v3.
Tengo que desarrollar un código que realice lo siguiente:
// Modificar la aplicación con geolocalización en Google Maps, Añadiendo un botón de “compactar” las rutas mostradas.
// Al pulsar el botón se deben eliminar los puntos intermedios de la ruta.
// La ruta se compactará volviendo a renderizar el mapa limpio y mostrando sobre él solo los puntos inicial y final, junto con la ruta directa que los une.
Al ser una API en V3, he tenido problemas y el código que he desarrollado es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio obligatorio - Módulo 8</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="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="gmaps.js"></script>
<link rel="stylesheet" type="text/css" href="mypath.css" />
<script type="text/javascript">
// Modificar la aplicación con geolocalización en Google Maps, Añadiendo un botón de “compactar” las rutas mostradas.
// Al pulsar el botón se deben eliminar los puntos intermedios de la ruta.
// La ruta se compactará volviendo a renderizar el mapa limpio y mostrando sobre él solo los puntos inicial y final, juntro con la ruta directa que los une.
var map, lat, lng;
var Origen;
var marker = new google.maps.Marker({
lat: lat,
lng: lng,
map: map,
}); // Para que aparezca el marcador tienes que crear una variable marcador
var marcadores = []; // Se tiene que crear un array en el que se guarde el número de marcadores que hay en el mapa
$(function(){
function enlazarMarcador(e){
// 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: '#476BB2',
strokeOpacity: 0.6,
strokeWeight: 5,
});
lat = e.latLng.lat(); // guardar coordenadas para la marca siguiente
lng = e.latLng.lng();
marcadores.push(marker);
map.addMarker({ lat: lat, lng: lng}); // pone el marcador final de la ruta en el mapa
};
// Esta función es la que localiza las coordenadas de origen en el 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,
});
marcadores.push(marker);
Origen = map.addMarker({ lat: lat, lng: lng}); // marcador en [lat, lng] , guardamos el primer marcador como origen
},
error: function(error) { alert('Geolocalización falla: ' + error.message); },
not_supported: function(){ alert("Su navegador no soporta geolocalización"); },
});
};
geolocalizar();
});
function FuncCompactar(){
alert(" El número de marcadores es : " + marcadores.length );
alert(" Se compacta la ruta dejando sólo los marcadores inicial y final.");
for ( var i = 0; i < ( marcadores.length - 1 ) ; i++) {
marcadores.setMap(null);
alert(" El marcador " + i + " se ha desconectado. ");
};
Origen;
map.addMarker({ lat: lat, lng: lng}); // pone el marcador final de la ruta en el mapa
marcadores = [];
};
</script>
</head>
<body>
<h1>- Geolocalización -<button type="button" id="compactar" onclick="FuncCompactar()" > Compactar </button></h1>
<div id="map"></div>
</body>
</html>
Me gustaría saber en que parte del código hay que realizar los cambios.
Muchas gracias por adelantado.
Un fuerte abrazo.
1 respuesta
¿Te está arrojando algún error especifico?
Veo que tu código está preparado para realizar esta acción en el bucle
for ( var i = 0; i < ( marcadores.length - 1 ) ; i++) {
marcadores.setMap(null);
alert(" El marcador " + i + " se ha desconectado. ");
};La situación que veo es que posiblemente el array marcadores no sea visible en esta función (pese a que lo has trabajado de manera global al inicio del script.
Solo puedo especular ya que tu script no lo he podido ejecutar al no tener todos los archivos que interactúan con el.
Quizá con la descripción del error en la consola javascript podamos entender de mejor manera que está sucediendo.
