Il codice della pagina è il seguente. In sintesi richiama le api di Google Maps (v3) e le interroga rispetto alla posizione dell'utente estraendo tutti i dati possibili per passarli ad un hidden a fondo pagina.
Per far questo l'utente deve scrivere il suo indirizzo in un campo di testo, fare la ricerca e confermare il risultato. Subito dopo la ricerca, sotto al campo di testo deve apparire la mappa di Google con il marker posizionato nel punto giusto e lo fa riempendo un div.
(a dirla tutta la mappa si deve vedere anche prima della ricerca perchè caricata all'apertura della pagina)
codice:
<div id="map"></div>
Se la pagina ha come DocType quanto segue, la mappa di Google non viene visualizzata...
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
La domanda è scontata: cosa metto al posto di questo DocType?
codice:
<script type="text/javascript" src="http://maps.google.it/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var createMap = function() {
searchAddress();
var address = document.getElementById("indirizzo").value;
if (address != '') {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': address}, function(results,status) {
if (status == google.maps.GeocoderStatus.OK) {
var options = {
zoom: 13,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
var marker = new google.maps.Marker(
{
position: results[0].geometry.location,
map: map,
title: 'Indirizzo da te indicato'
}
);
var tooltip = '<div id="tooltip">'+
'
Indirizzo:
'+
results[0].formatted_address+'</p>'+
'
Coordinate geografiche:
'+
results[0].geometry.location+'</p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: tooltip
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
//alert ("sono dentro");
//conto quante posizioni ha l'arrey e, a ritroso, le scorro
var lunghezza_massima_array = results[0].address_components.length
var cap;
var sigla_nazione;
var nazione;
var regione;
var sigla_provincia;
var provincia;
var comune;
var frazione;
var via;
var civico;
var indirizzo2;
var latitudine;
var longitudine;
indirizzo2 = results[0].formatted_address;
latitudine = results[0].geometry.location.lat();
longitudine = results[0].geometry.location.lng();
//estrai il cap
for (i=0; i<lunghezza_massima_array; i++){
for (j=0;j<results[0].address_components[i].types.length;j++){
if(results[0].address_components[i].types[j]=="postal_code")
cap = results[0].address_components[i].long_name
}
}
//estrai sigla nazione
for (i=0; i<lunghezza_massima_array; i++){
for (j=0;j<results[0].address_components[i].types.length;j++){
if(results[0].address_components[i].types[j]=="country")
sigla_nazione = results[0].address_components[i].short_name
}
}
//estrai nazione
for (i=0; i<lunghezza_massima_array; i++){
for (j=0;j<results[0].address_components[i].types.length;j++){
if(results[0].address_components[i].types[j]=="country")
nazione = results[0].address_components[i].long_name
}
}
//estrai regione
for (i=0; i<lunghezza_massima_array; i++){
for (j=0;j<results[0].address_components[i].types.length;j++){
if(results[0].address_components[i].types[j]=="administrative_area_level_1")
regione = results[0].address_components[i].long_name
}
}
//estrai sigla provincia
for (i=0; i<lunghezza_massima_array; i++){
for (j=0;j<results[0].address_components[i].types.length;j++){
if(results[0].address_components[i].types[j]=="administrative_area_level_2")
sigla_provincia = results[0].address_components[i].short_name
}
}
//estrai provincia
for (i=0; i<lunghezza_massima_array; i++){
for (j=0;j<results[0].address_components[i].types.length;j++){
if(results[0].address_components[i].types[j]=="administrative_area_level_2")
provincia = results[0].address_components[i].long_name
}
}
//estrai comune
for (i=0; i<lunghezza_massima_array; i++){
for (j=0;j<results[0].address_components[i].types.length;j++){
if(results[0].address_components[i].types[j]=="administrative_area_level_3")
comune = results[0].address_components[i].long_name
}
}
//estrai frazione
for (i=0; i<lunghezza_massima_array; i++){
for (j=0;j<results[0].address_components[i].types.length;j++){
if(results[0].address_components[i].types[j]=="locality")
frazione = results[0].address_components[i].long_name
}
}
//estrai via
for (i=0; i<lunghezza_massima_array; i++){
for (j=0;j<results[0].address_components[i].types.length;j++){
if(results[0].address_components[i].types[j]=="route")
via = results[0].address_components[i].long_name
}
}
//estrai civico
for (i=0; i<lunghezza_massima_array; i++){
for (j=0;j<results[0].address_components[i].types.length;j++){
if(results[0].address_components[i].types[j]=="street_number")
civico = results[0].address_components[i].long_name
}
}
document.getElementById('new_indirizzo').value = indirizzo2;
document.getElementById('cap').value = cap;
document.getElementById('sigla_nazione').value = sigla_nazione;
document.getElementById('nazione').value = nazione;
document.getElementById('regione').value = regione;
document.getElementById('sigla_provincia').value = sigla_provincia;
document.getElementById('provincia').value = provincia;
document.getElementById('comune').value = comune;
document.getElementById('frazione').value = frazione;
document.getElementById('via').value = via;
document.getElementById('civico').value = civico;
document.getElementById('qualita_localizzazione').value = results[0].geometry.location_type;
document.getElementById('new_latitudine').value = latitudine;
document.getElementById('new_longitudine').value = longitudine;
sblocca_tasto_procedi();
} else {
alert("Problema nella ricerca dell'indirizzo: " + status);
}
});
} else {
//si tratta del caricamento della mappa automatico, il primo, non quello fatto dall'utente
address = "italia";
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': address}, function(results,status) {
if (status == google.maps.GeocoderStatus.OK) {
var options = {
zoom: 6,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
} //chiude lo status OK
});
}
}
var searchAddress = function(){
document.getElementById("cerca").onclick = function() {
createMap();
}
}
function sblocca_tasto_procedi(){
var a = document.getElementById("new_latitudine");
var b = document.getElementById("new_longitudine");
var c = a.value;
var d = b.value;
//alert('Latitudine: ' + c + 'Longitudine: ' + d);
if ((c != 0) && (d != 0)) {
//alert('diversi');
document.form2.conf_pos.disabled=false;
}
}
window.onload = createMap;
</script>
<form id="form2" name="form2" method="post" action="login3.php">
Indirizzo: <a href="#" onclick="searchAddress()"><input id="indirizzo" type="textbox" value="" >
<input id="cerca" type="button" value="trova indirizzo sulla mappa"></a>
<input type="submit" id="conf_pos" name="conf_pos" value="conferma posizione" disabled="disabled" tabindex="1" />
<div id="map"></div>
<input type="hidden" name="new_indirizzo" id="new_indirizzo">
<input type="hidden" name="cap" id="cap">
<input type="hidden" name="nazione" id="nazione">
<input type="hidden" name="sigla_nazione" id="sigla_nazione">
<input type="hidden" name="regione" id="regione">
<input type="hidden" name="sigla_provincia" id="sigla_provincia">
<input type="hidden" name="provincia" id="provincia">
<input type="hidden" name="comune" id="comune">
<input type="hidden" name="frazione" id="frazione">
<input type="hidden" name="via" id="via">
<input type="hidden" name="civico" id="civico">
<input type="hidden" name="qualita_localizzazione" id="qualita_localizzazione">
<input type="hidden" name="new_latitudine" id="new_latitudine">
<input type="hidden" name="new_longitudine" id="new_longitudine">
</form>
Rispondi quotando
