Salve, sto cercando di fare una mappa personalizzata , sul click nella posizione si apre un popup con le informazioni .
Cerco di spiegarmi meglio.
Da php leggo da una tabella del db un elenco di immobili, carico in array con nome locations, poi devo spostarmi in JS e trasferirla su tabella per poterla dare a googlemaps.
Effettivamente mi dà un marker personalizzato su ogni posizione correttamente, ma il mio problema è la correttezza delle info : una foto , la via e la tipologia dell'immobile sono sempre quelle dell'ultimo indice e non quello di ogni singolo elemento.
Non riesco ad uscirne, qualche aiuto ? ve ne sarei molto grato.
Posto il codice :
<?php
/* questi sono i dati principali dell' agenzia che posiziono nell'array in indice 0 */
$lat_centro = '40.723688497591';
$lng_centro = '8.561205504964734';
$foto = "immagini/ufficio.jpg";
$localita = "Sassari";
$via = "Piazza Emiciclo Garibaldi, 11";
$des = "I Nostri uffici, vi aspettiamo per conoscerci.";
$tipologia = "Appartamento";
$card = array (
'tipologia' => $tipologia,
'foto' => $foto,
'lat' => $lat_centro,
'lng' => $lng_centro,
'localita' => $localita,
'via' => $via,
'des' => $des
);
/* qui inizio a leggere la tabella immobili ho provato con 7 records */
if ($tabella) :
foreach ($tabella as $row) :
$foto = primafoto($row['codice']);
$arr_lat = explode(',', $row['latlng'] );
$lat = $arr_lat['0'];
$lng = $arr_lat['1'];
$localita = $row['localita'];
$via = $row['indirizzo'];
$des = $row['descrizione'];
$locations[]= array(
'tipologia' => $tipologia,
'foto' => $foto,
'lat' => $lat,
'lng' => $lng,
'localita' => $localita,
'via' => $via,
'des' => $des
);
// echo $locations[0]['foto'].": In stock: ".$locations[0]['lat'].", sold: ".$locations[0]['lng'].".<br>";
// echo $locations[1]['foto'].": In stock: ".$locations[1]['lat'].", sold: ".$locations[1]['lng'].".<br>";
endforeach;
endif;
// inserisco in arry in posizione 0 i dati dell'array card ufficio
array_unshift($locations, $card );
echo ' <div id="map"></div>';
?>
Poi la parte js per googlemaps che funziona nei markers ma con informazioni dell'ultimo indice per tutti e 7 i records
<script type="text/javascript">
const punto = 'assets/icon/marker.png';
var map;
var Markers = {};
var infowindow;
var locations = [
<?php
for($i=0;$i<sizeof($locations);$i++){ $j=$i+1;?>
[
'<?php echo $locations[$i]['tipologia'];?>',
'<?php echo $locations[$i]['foto'];?>',
<?php echo $locations[$i]['lat'];?>,
<?php echo $locations[$i]['lng'];?>,
'<?php echo $locations[$i]['localita'];?>'
]
<?php if($j!=sizeof($locations))echo ",";
}
?>
];
var origin = new google.maps.LatLng(<?=$lat_centro.','.$lng_centro?>); /* info per uffio */
function initialize() {
var mapOptions = {
zoom: 11,
center: origin,
map : map,
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
// ciclo per il numero di elementi nell array locations
for(i=0; i<locations.length; i++) {
var position = new google.maps.LatLng(locations[i][2], locations[i][3]);
var marker = new google.maps.Marker({
position: position,
icon :punto,
zoom :10,
map: map,
});
var contentString =
'<div class="card">' +
'<img class="card-img-top" src=" ' + locations[i][1] + '">' +
'<div class="info-content">' +
'<h2>' + locations[i][0] + '</h2>' +
'<h2>' + locations[i][4] + '</h2>' +
'<p> numero ind = '+ i + '</p><br><br>' +
'</div>'+
'</div>';
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(contentString);
infowindow.setOptions({maxWidth: 250});
infowindow.open(map, marker);
}
}) (marker, i));
// Markers[locations[i][4]] = marker;
}
locate(0);
}
function locate(marker_id) {
var myMarker = Markers[marker_id];
var markerPosition = myMarker.getPosition();
map.setCenter(markerPosition);
google.maps.event.trigger(myMarker, 'click');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>