|
|||||||
|
|
|
 |
|
|
Strumenti |
31-01-2014, 17:30
|
#1 |
|
Member
Iscritto dal: Nov 2013
Messaggi: 62
|
[PHP] Creare una mappa Google per ogni indirizzo
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 è questo
 cioè una colonna di mappe grige, a parte l'ultima che però non è il massimo come si può notare dall'immagine. Questo è il 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 type="text/javascript" src="../public/js/javascript.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
//$addresses è un array PHP che contiene gli indirizzi, con la funzione json_encode trasformo l'array php in un array javascript
<script type='text/javascript'>
var addresses = <?php echo json_encode($addresses); ?>;
</script>
<script type="text/javascript" src="../public/js/maps.js"></script>
</head>
<body>
<!-- Google maps -->
<div id="content_map-canvas"></div>
</body>
</html>
Codice:
function initialize() {
var geocoder;
var map;
var count = 0; //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];
geocoder = 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 br = document.createElement("br");
var content_map_canvas = document.getElementById("content_map-canvas");
content_map_canvas.appendChild(div);
content_map_canvas.appendChild(br);
map = new google.maps.Map(document.getElementById(id), options);
//geocoding(address, description);
geocoder.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);
}
});
}
 Dove sbaglio? Non capisco.. Grazie a tutti |
|
|
|
31-01-2014, 22:51
|
#2 |
|
Senior Member
Iscritto dal: Nov 2010
Città: Londra
Messaggi: 620
|
Codice:
<div id="map-canvas1" style="display:block;width:600px;height:400px; margin-bottom:20px;"></div>
<div id="map-canvas2" style="display:block;width:600px;height:400px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myIcon = new google.maps.MarkerImage("http://www2.psd100.com/ppp/2013/11/2701/Map-location-marker-1127205319.png", null, null, null, new google.maps.Size(55, 29));
var locations = [
['Berlin', 52.5167, 13.3833, 2],
['Test', 40, 17, 1],
];
var mapOptions1 = {
zoom: 3,
center: new google.maps.LatLng(40, 35),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
position: marker1
}
var mapOptions2 = {
zoom: 4,
center: new google.maps.LatLng(40, 35),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
position: marker2
}
var map1 = new google.maps.Map(document.getElementById('map-canvas1'),
mapOptions1);
var map2 = new google.maps.Map(document.getElementById('map-canvas2'),
mapOptions2);
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(locations[0][1], locations[0][2]),
map: map1,
icon: myIcon
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(locations[1][1], locations[1][2]),
map: map2,
icon: myIcon
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Puoi personalizzare quel codice inserendo nell'array delle location latitudine e longitudine di tutti gli indirizzi che vuoi rappresentare. Puoi personalizzare il marker, specificando url e dimensione (gli ultimi due valori in quella funzione). Puoi personalizzare la visualizzazione della mappa specificando il centro (in genere è lo stesso della location se è una sola) e lo zoom. Sarebbe meglio non generare quell'array di location in php ma piuttosto fare una chiamata ajax al server per avere un json contenente l'array. Sarebbe meglio non utilizzare il css inline; nell'esempio l'ho messo per farti capire che è necessario specificare una dimensione altrimenti non visualizzi nulla. |
|
|
|
|
01-02-2014, 17:47
|
#3 |
|
Member
Iscritto dal: Nov 2013
Messaggi: 62
|
Grazie OoZic per la risposta. Ci saranno numerose mappe quindi forse mi conviene un ciclo. Infatti uso un for nel mio codice sopra, eppure non va...
|
|
|
|
|
01-02-2014, 18:16
|
#4 |
|
Senior Member
Iscritto dal: Nov 2010
Città: Londra
Messaggi: 620
|
Comincia "copiando" e facendo funzionare il mio codice, poi pensi ad un ciclo direi
|
|
|
|
|
01-02-2014, 18:34
|
#5 | |
|
Member
Iscritto dal: Nov 2013
Messaggi: 62
|
Quote:
|
|
|
|
|
|
01-02-2014, 19:23
|
#6 |
|
Senior Member
Iscritto dal: Nov 2010
Città: Londra
Messaggi: 620
|
modo poco corretto: scrivere direttamente quell'array usando php
modo corretto: chiamata ajax che richiede quell'array e disegna la mappa una volta che ha ricevuto i dati. |
|
|
|
|
01-02-2014, 20:45
|
#7 | |
|
Member
Iscritto dal: Nov 2013
Messaggi: 62
|
Quote:
|
|
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 17:45.
