En lo medular: no cierra porque es una polilínea, para las cuales no tiene ningún significado topológico el hecho de "cerrarse". Por el contrario, un polígono no puede existir "abierto" entre otras restricciones.
Lo que quieres hacer no es tan simple como reemplazar la polilínea con un polígono, porque tendrías que esperar a tener 3 puntos para empezar a mostrar el resultado parcial. Si bien se podría usar un google.maps.drawing.DrawingManager el hecho de ponerse en modo "dibujar polígono" deja tomada la interfaz hasta que lo completas o lo cancelas, y eso me parece que no es lo que buscas.
Hice una solución como prueba de concepto que salió un poco más extensa de lo que quería. Básicamente mantengo el listener que añade puntos a la polilínea al pinchar el mapa.
Sobre el path de la polilínea pongo también un listener en el evento insert_at
(lo hice así para dejar los callbacks algo menos atestados) en donde se adosa un marcador a un MVCArray que le puse como extra a la polilínea (también podría haber puesto los marcadores en el espacio global).
Como el insert_at
me da el índice insertado, ya tengo el label del marcador. De entre estos markers, sobre el primero declaro un lístener tal que al hacer click sobre él se gatillan las siguientes acciones:
- Se crea un polígono, cuyo anillo exterior (y el único en este caso) es una copia del anillo cerrado de la polilínea
- El path de la polilínea se vacía
- Se eliminan todos los markers que le había adosado
Salvo por el polígono que queda en el mapa, el resto está listo para hacer el ejercicio una y otra vez.
let poly, map;
let poligonos = [];
function appendMarker(polyline, index) {
let newMarker = new google.maps.Marker({
map: map,
position: polyline.getPath().getAt(index),
label: `#${index}`,
clickable: !index,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: index ? '#09F' : '#F90',
fillOpacity: 0.4,
strokeColor: '#00A',
strokeOpacity: 0.9,
strokeWeight: 0.5,
scale: 9
}
});
polyline.get('markers').push(newMarker);
return newMarker;
}
function initMap() {
map = new google.maps.Map(document.querySelector('#map'), {
center: {
lat: -33.47,
lng: -70.656
},
zoom: 13
});
map.setClickableIcons(false);
poly = new google.maps.Polyline({
strokeColor: "#0077cc",
strokeOpacity: 1.0,
strokeWeight: 3,
map
});
poly.set('markers', new google.maps.MVCArray());
map.addListener("click", ({
latLng
}) => {
const path = poly.getPath();
path.push(latLng);
});
google.maps.event.addListener(poly.getPath(), 'insert_at', (index) => {
let newMarker = appendMarker(poly, index);
// El primer marker tiene el poder de cerrar el polígono
if (index === 0) {
google.maps.event.addListener(newMarker, 'click', () => {
let path = poly.getPath(),
// creo un polígono usando el anillo de la polilínea
newPolygon = new google.maps.Polygon({
map,
strokeWeight: 1,
fillColor: '#0a0',
fillOpacity: 0.2,
path: path.getArray()
});
// lo añado a un array en el scope super-superior por si se quiere usar en algo....
poligonos.push(newPolygon);
// vacío el path de la polilínea
path.clear();
// vacío los markers
let markers = poly.get('markers')
while (markers.getLength()) {
markers.pop().setMap(null);
}
});
}
});
}
<script src="https://maps.googleapis.com/maps/api/js?library=geometry&key=AIzaSyBRqo4qwqHHrtbY9aL6vYYDw1GOhkK97MQ&callback=initMap&libraries=geometry" async defer>
</script>
<div id="map" style="width:100%;height:300px;"></div>
Si te fijas, tuve que pasar el path a su array subyacente, puesto que si asigno el mismo path al polígono el limpiar la polilínea también lo limpiará a él.
Ojo que si tu polilínea se intersecta a sí misma dará origen a un polígono topológicamente incorrecto (lo cual no importa para este caso porque a google le da lo mismo)