Ciao, devo creare una pagina php che mostra, per ogni indirizzo contenuto in un array, una mappa Google. Il codice scritto da me non va, quello che vedo è
cioè una colonna di mappe grige a parte l'ultima, che però contiene più markers mentre dovrebbero esserci tot mappe con ognuna un marker.
L'array di indirizzi viene preso da php tramite il database, questo array viene poi passato a javascript tramite la funzione json_encode.
Codice HTML:
Codice javascript:
Dove sbaglio? Grazie mille
cioè una colonna di mappe grige a parte l'ultima, che però contiene più markers mentre dovrebbero esserci tot mappe con ognuna un marker.
L'array di indirizzi viene preso da php tramite il database, questo array viene poi passato a javascript tramite la funzione json_encode.
Codice HTML:
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="../public/css/style.css"/>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type='text/javascript'>
var addresses = <?php echo json_encode($addresses); ?>;
</script>
<script type="text/javascript" src="../public/js/maps.js"></script>
</head>
<body>
<!-- mappe Google -->
<div id="content_map-canvas">
</div>
</body>
</html>Codice javascript:
Codice:
function initialize() {
var count = -1; //Is used to number the div (one per address)
var descriptions = new Array(); //Array of descriptions
//I copy the contents of the addresses array in the descriptions array
for(var i=0; i<addresses.length; i++) {
var address = addresses[i];
var description = addresses[i];
var geoc = "geocoder" + i;
eval("var " + geoc);
var map = "map" + i;
eval("var " + map);
geoc = new google.maps.Geocoder();
var options = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
count = count + 1;
var id = "map-canvas" + count;
var div = document.createElement("div");
div.id = id;
div.style.width= "300px";
div.style.height= "300px";
var content_map_canvas = document.getElementById("content_map-canvas");
content_map_canvas.appendChild(div);
map = new google.maps.Map(document.getElementById(id), options);
geoc.geocode({'address': address}, function(results, status) {
if(status === google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker
({map: map,
position: results[0].geometry.location,
title: description
});
marker.setAnimation(google.maps.Animation.DROP);
contentString = description;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
else {
alert("Geocode failed: " + status + ", " + address);
}
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);Dove sbaglio? Grazie mille
