0

tengo un archivo json este contiene un objeto el cual cuenta con coordenadas de diferentes lugares, mi archivo json tiene la siguiente estructura

   [{direccion: 'MATEO BENITEZ 89 COL. centro TUXTEPEC MEXICO CP 38500', latitud: 
 '20.48871324385829', longitud: '-100.65457702572893'}, {direccion: 'JOSEFINA ENRIQUEZ 102   
  COL.  CENTRO TUXTEPEC CP 68300', latitud: '20.48871324385829', longitud: ' 
 -100.65457702572893'}] 

¿que estructura o función debo de utilizar para que me muestre las coordenadas de diferentes los diferentes elementos que contiene en un mapa con marcadores? Algo como la siguiente imagen.

introducir la descripción de la imagen aquí tengo este codigo de ejemplo pero no se muy bien donde es que se le tienen que reemplazar los valores, voy empezando a usar json y google maps. Les agradeceria si me pudieran explicar un poquito para entender como es que funciona.

  const getLocations = () => {
   fetch('https://www.datos.gov.co/resource/g373-n3yy.json')// archivo json ejemplo data.js?
.then(response => response.json())
.then(locations => {
    let locationsInfo = []
    
    locations.forEach(location => {
        let locationData = {
            position:{lat:location.punto.coordinates[1],lng:location.punto.coordinates[0]},
            name:location.nombre_sede                
        }
        locationsInfo.push(locationData)
    })
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition((data)=>{
            let currentPosition = {
                lat: data.coords.latitude,
                lng: data.coords.longitude
            }
            dibujarMapa(currentPosition, locationsInfo)
             })
          }
      })
 }

     const dibujarMapa = (obj, locationsInfo) => {
    let map = new google.maps.Map(document.getElementById('map'),{
    zoom: 4,
    center: obj
    })

    let marker = new google.maps.Marker({
    position: obj,
    title: 'Tu ubicacion'
})
marker.setMap(map)

let markers = locationsInfo.map(place => {
    return new google.maps.Marker({
        position: place.position,
        map: map,
        title: place.name
    })
   })
  }
    window.addEventListener('load',getLocations)

1 respuesta 1

0

¡Hola!

En la documentación de Google Maps hay mucha información bastante útil sobre este asunto: https://developers.google.com/maps/documentation/javascript/markers https://developers.google.com/maps/documentation/javascript/custom-markers

Como puedes observar, se realiza lo siguiente:

const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });
  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });

Esto sería para crear un solo marcador, pero puedes meter esto:

new google.maps.Marker({
        position: myLatLng,
        map,
        title: "Hello World!",
      });

En un bucle para podre incluir todos los puntos que necesites.

En tu caso, además, tendrás que recorrer el JSON, para obtener la lat y lng de cada marker que desees poner, pero será simplemente un for sobre el objeto JSON.

Si quieres empezar de forma sencilla, prueba si quieres a hacerlo con un objeto que tu mismo construyas en JS, y posteriormente lo sustituyes por la llamada al JSON.

3
  • muchas, gracias pero como mando llamar al archivo json, por ejemplo si no esta en una URL, es decir si tengo los datos en un Json que yo eh creado?
    – joselito
    el 22 jul. 2021 a las 14:17
  • Existen varias opciones para cargar un fichero JSON, podrías usar algo como esto: codepen.io/KryptoniteDove/post/… una de las opciones más interesantes. O si utilizas jQuery y quieres simplificarte el trabajo, puedes usar $.getJSON: api.jquery.com/jquery.getjson
    – Jamarin
    el 22 jul. 2021 a las 19:15
  • me podrías dar un ejemplo de la estructura junto con el for para los marcadores en el mapa? Soy nuevo en esto y aun no entiendo muy bien como es que funciona, estoy tratando de integrar los marcadores pero por mas que intento no me aparece nada.
    – joselito
    el 22 jul. 2021 a las 21:49

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.