0

Buenas estoy intentando llenar un mapa con clusters, estoy trayendo las localizaciones de la base de datos con AJAX, luego creo una variable que ya contiene todo para rellenarlo y hago un push para poder usarlo en la función de initMAP, pero me sale nada. Os muestro que estoy haciendo.

Defino la variable centros, y luego con la información que traigo por AJAX genero lo que necesita google maps.

var centros = [];
    $(document).ready(function(){
        $.ajax({                        
            type: "GET",                 
            url : "{{URL::to('/centros')}}",
            dataType:"json",
            success: function(data)            
            {
                for(var i=0;i<data.centros.length;i++) 
                {
                  centros.push('{lat: '+ data.centros[i].latitud +', lng: '+ data.centros[i].longitud +'},');
                }
                //console.log(centros);
             }
    });
}); 

Luego envio el parametro centros a la siguiente función y cargo los centros ahí.

function initMap(centros) {
        
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 3,
          center: {lat: 39.2033565, lng: -0.3113277999999582},
        });
        // Create an array of alphabetical characters used to label the markers.
        const labels = "C";
        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        const markers = locations.map((location, i) => {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length],
          });
        });
        // Add a marker clusterer to manage the markers.
        new MarkerClusterer(map, markers, {
          imagePath:
            "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
        });
      }
      
      const locations = centros
      console.log(locations);

El console.log(locations); lo que me trae es lo siguiente.

[]
0: "{lat: 39.4718655, lng: -0.3840513},"
1: "{lat: 38.8421981, lng: -0.113122},"
2: "{lat: 38.9939887, lng: -0.5172643},"
3: "{lat: 38.9630974, lng: -0.58739},"
4: "{lat: 39.390369, lng: -0.7124376},"
5: "{lat: 39.4247713, lng: -0.4665065},"
6: "{lat: 39.4535737, lng: -0.4064579},"
7: "{lat: 39.150306, lng: -0.4407379},"
8: "{lat: 39.5180665, lng: -0.377204},"
9: "{lat: 39.47136, lng: -0.7178069},"
10: "{lat: 39.0369313, lng: -0.6596856},"
11: "{lat: 39.518195, lng: -0.4238217},"
12: "{lat: 38.9921306, lng: -0.5256887},"
13: "{lat: 39.5733856, lng: -0.3316215},"
14: "{lat: 39.5635474, lng: -0.2871925},"
15: "{lat: 39.5016194, lng: -0.4441376},"
16: "{lat: 39.4948569, lng: -0.468224},"
17: "{lat: 39.4616046, lng: -0.4601335},"
18: "{lat: 39.8465105, lng: -0.4892299},"
19: "{lat: 40.4695856, lng: 0.4677703},"
length: 20
__proto__: Array(0)

Pero no carga nada en el mapa, que puede ser???


Si cargo manualmente en la variable centros, esto. A la vez que cargo los mios, si hay una diferencia:

  { lat: -31.56391, lng: 147.154312 },
  { lat: -33.718234, lng: 150.363181 },

Los que pongo manualmente parece texto plano y lo otro un obejeto:

21: {lat: -42.735258, lng: 147.438}
22:
lat: -43.999792
lng: 170.463352
__proto__: Object
23: "{ lat: 39.4718655, lng: -0.3840513 },"
24: "{ lat: 38.8421981, lng: -0.113122 },"

Si os fijais se pueden abrir, esos si funcionan pero los mios no, tengo que pasarlo a un obejto? he probado pero sin acierto.


Actualización

Muestro como lo tengo ahora, aunque sigue sin funcionar. Lo único que he cambiado es el success del AJAX.

for(var i=0;i<data.centros.length;i++) 
   {
     var lat = data.centros[i].latitud;
     var lng = data.centros[i].longitud;
     centros.push({"lat": parseFloat(lat), "lng": parseFloat(lng)});     
    }

Lo que veo es que en el console.log(centros), en la consola de chrome, me sale así:

->[] // Una vez le hago click si que salen todos los resultados.

En cambio si relleno la variable centros manualmente me sale así:

->(23) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

El AJAX me trae directamente esto

{centros: Array(20)}
centros: Array(20)
0: {latitud: "39.4718655", longitud: "-0.3840513"}
1: {latitud: "38.8421981", longitud: "-0.113122"}
2: {latitud: "38.9939887", longitud: "-0.5172643"}
3: {latitud: "38.9630974", longitud: "-0.58739"}
4: {latitud: "39.390369", longitud: "-0.7124376"}
5: {latitud: "39.4247713", longitud: "-0.4665065"}
6: {latitud: "39.4535737", longitud: "-0.4064579"}
7: {latitud: "39.150306", longitud: "-0.4407379"}
8: {latitud: "39.5180665", longitud: "-0.377204"}
9: {latitud: "39.47136", longitud: "-0.7178069"}
10: {latitud: "39.0369313", longitud: "-0.6596856"}
11: {latitud: "39.518195", longitud: "-0.4238217"}
12: {latitud: "38.9921306", longitud: "-0.5256887"}
13: {latitud: "39.5733856", longitud: "-0.3316215"}
14: {latitud: "39.5635474", longitud: "-0.2871925"}
15: {latitud: "39.5016194", longitud: "-0.4441376"}
16: {latitud: "39.4948569", longitud: "-0.468224"}
17: {latitud: "39.4616046", longitud: "-0.4601335"}
18: {latitud: "39.8465105", longitud: "-0.4892299"}
19: {latitud: "40.4695856", longitud: "0.4677703"}
length: 20
__proto__: Array(0)
__proto__: Object
10
  • A mí me parece que locations no está definido cuando intentas usarlo. Prueba con const markers = centros.map(...)
    – ffflabs
    Commented el 9 mar. 2021 a las 20:26
  • Lo tengo medio solucionado, no hace falta que este definido, el problema es que el arreglo no estaba bien construido, solo tengo que quitarle las comillas al string 23: {lat: "39.4718655", lng: "-0.3840513"} tengo que quitar esas comillas
    – Miguel
    Commented el 9 mar. 2021 a las 20:27
  • En serio? Pensaba que var era hoisted y const era block scoped, a lo mejor es block scoped a initmap completo
    – ffflabs
    Commented el 9 mar. 2021 a las 20:30
  • Sabes como quitar esas comillas, creo que es lo único que falla
    – Miguel
    Commented el 9 mar. 2021 a las 20:31
  • centros.push({lat:data.centros[i].latitud, lng: data.centros[i].longitud})
    – ffflabs
    Commented el 9 mar. 2021 a las 20:32

1 respuesta 1

0

Esta pregunta ha tenido tantas iteraciones que ya no sé qué le estás pasando al bucle. En lo medular: no debes concatenar lo que te llega. Tu enfoque inicial sólo generaba un arreglo de strings

 var centros=[];
  for (var i = 0; i < data.centros.length; i++) {
      centros.push(
      '{lat: ' + data.centros[i].latitud + ', lng: ' + data.centros[i].longitud + '},'
      );
  }
  return centros;

Genera algo como

    [
     "{lat: 123, lng: 456}," ,
      ...
     "{lat: 789, lng: 1011}," 
    ]

El mapa necesita que le pases un array de objetos, y que cada objeto tenga las propiedades lat y lng, y que el valor de ambas sea un número. Cualquier otro escenario no te dibujará lo que buscas.

A partir de lo que comentas que devuelve tu ajax,

 { 
   centros : [
      {latitud: "39.4718655", longitud: "-0.3840513"},
      ...
      {latitud: "40.4695856", longitud: "0.4677703"}
   ]
 }

Creo que lo más eficiente es tomar data y retornar usando Array.prototype.map:

return data.centros.map(centro => {
   return {
     lat: Number(centro.latitud),
     lng: Number(centro.longitud)
   };
});

Hice un experimento simulando el ajax con una promesa y un timeout.

(lo que no entiendo es en qué parte le metías datos por consola a centros, siendo que es una variable interna de la función initMap)

function llamadaAjax() {
   
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        centros: [{
            latitud: "39.4718655",
            longitud: "-0.3840513"
          },
          {
            latitud: "38.8421981",
            longitud: "-0.113122"
          },
          {
            latitud: "38.9939887",
            longitud: "-0.5172643"
          },
          {
            latitud: "38.9630974",
            longitud: "-0.58739"
          },
          {
            latitud: "39.390369",
            longitud: "-0.7124376"
          },
          {
            latitud: "39.4247713",
            longitud: "-0.4665065"
          },
          {
            latitud: "39.4535737",
            longitud: "-0.4064579"
          },
          {
            latitud: "39.150306",
            longitud: "-0.4407379"
          },
          {
            latitud: "39.5180665",
            longitud: "-0.377204"
          },
          {
            latitud: "39.47136",
            longitud: "-0.7178069"
          },
          {
            latitud: "39.0369313",
            longitud: "-0.6596856"
          },
          {
            latitud: "39.518195",
            longitud: "-0.4238217"
          },
          {
            latitud: "38.9921306",
            longitud: "-0.5256887"
          },
          {
            latitud: "39.5733856",
            longitud: "-0.3316215"
          },
          {
            latitud: "39.5635474",
            longitud: "-0.2871925"
          },
          {
            latitud: "39.5016194",
            longitud: "-0.4441376"
          },
          {
            latitud: "39.4948569",
            longitud: "-0.468224"
          },
          {
            latitud: "39.4616046",
            longitud: "-0.4601335"
          },
          {
            latitud: "39.8465105",
            longitud: "-0.4892299"
          },
          {
            latitud: "40.4695856",
            longitud: "0.4677703"
          }
        ]
      });

    }, 1500);
  }).then(function(data) {

    return data.centros.map(centro => {
      return {
        lat: Number(centro.latitud),
        lng: Number(centro.longitud)
      };
    });

  });
}

function initMap(centros) {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 39.4718655,
      lng: -0.3
    },
    zoom: 9
  });
  const markers = centros.map((location, i) => {
    return new google.maps.Marker({
      position: location,

      map
    });
  });
}

llamadaAjax().then((centros) => initMap(centros));
#map {
  height: 300px;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=geometry&key=AIzaSyBRqo4qwqHHrtbY9aL6vYYDw1GOhkK97MQ"></script>


<div class="col-md-12 col-sm-12" id="map"></div>

7
  • Hola gracias por tu respuesta, seguro que le estare dando muchas vueltas al código, es de las primeras veces que genere el código por mi mismo. Tengo una duda, la variable centros[] tiene que estar dentro del success? y por otro lado, en el for haces un return pero luego más abajo haces otro return supongo que habré puesto algo mal, por que me saca un string, no se si te apetece que lo veamos en un chat, para no alargar esto. Gracias!
    – Miguel
    Commented el 10 mar. 2021 a las 9:05
  • Ah, no, solamente dejé lo que supuse que tenías, y retorné antes sin usar la variable centros. Mejor quito eso
    – ffflabs
    Commented el 10 mar. 2021 a las 9:24
  • Y efectivamente, si la variable centros existe en el scope superior, se vuelve confuso que además sea un parámetro de initMap. Eso se llama variable shadowing
    – ffflabs
    Commented el 10 mar. 2021 a las 9:27
  • Sigo sin conseguirlo, creo que hay algo que no estoy entendiendo. Podemos pasar el debate a chat y lo vemos con más detención por favor!?
    – Miguel
    Commented el 10 mar. 2021 a las 9:29
  • No puedo, Miguel. Tengo reunión a las 11 y estoy contra el tiempo.
    – ffflabs
    Commented el 10 mar. 2021 a las 10:59

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.