0

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>

1

1 respuesta 1

0

Tus posiciones tienen llaves latitud y longitud

 let lugarInfo = {
      posicion: { latitud: lugar.latitud, longitud: lugar.longitud },
      nombre: lugar.Nombre
 }

Después le pasas esa posición a un marker, pero el marker espera las llaves lat y lng

let marcadores = lugaresInfo.map(lugar => {
    return new google.maps.Marker({
        position: lugar.posicion,  // esto no tiene las llaves necesarias
        title: lugar.nombre,
        map: mapa
    })
})

Tienes que usar las llaves que google espera, o transformar tu posición en el camino para traducir sus llaves

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.