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
locations
no está definido cuando intentas usarlo. Prueba conconst markers = centros.map(...)
23: {lat: "39.4718655", lng: "-0.3840513"}
tengo que quitar esas comillascentros.push({lat:data.centros[i].latitud, lng: data.centros[i].longitud})