Tengo un problema en Javascript: intento dibujar en Google maps las coordenadas de un arreglo que me da la latitud y la longitud pero no logro dar con la solución.
Mi arreglo lo recibo de esta forma en formato json:
{lat: 19.06511, lng: -98.25456621}
El error:
js?key=XXXXXXXX InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
<style>
#map {
height: 20em;
}
</style>
<body>
<section id="map"></section>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=XXX" async></script>
<script>
let lugaresInfo = []
const ConseguirLugares = () => {
fetch('test')
.then(response => response.json())
.then(lugares => {
console.log(lugares)
lugares.forEach(lugar => {
let lugarInfo = {
posicion: { latitud: lugar.latitud, longitud: lugar.longitud },
nombre: lugar.Nombre
}
console.log("arreglo", lugarInfo);
lugaresInfo.push(lugarInfo)
});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(usuarioUbicacion => {
let ubicacion = {
lat: usuarioUbicacion.coords.latitude,
lng: usuarioUbicacion.coords.longitude
}
console.log("arreglo de ubi", ubicacion);
dibujarMapa(ubicacion)
})
}
})
}
const dibujarMapa = (obj) => {
let mapa = new google.maps.Map(document.getElementById('map'), {
center: obj,
zoom: 4
})
console.log("aqui");
let marcadorUsuario = new google.maps.Marker({
position: obj,
title: 'Tu ubicacion'
})
marcadorUsuario.setMap(mapa)
let marcadores = lugaresInfo.map(lugar => {
return new google.maps.Marker({
position: lugar.posicion,
title: lugar.nombre,
map: mapa
})
})
}
ConseguirLugares()
</script>