Codice iniziale e funzionante:
JAVASCRIPT:
var geocoder;
var map;
indirizzi = new Array("Via Sala 7 erba", "via garibaldi 22 Rogeno 23849");
descrizioni = new Array("Vanessa", "Alex");
function visualizzamappa() {
geocoder = new google.maps.Geocoder();
var opzioni = {zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById("map_canva s"), opzioni);
// ciclo FOR che attiva la funzione di geocoding per ogni elemento del vettore indirizzi[x]
for (var x=0; x<lunghciclo; x++)
{ codifica_indirizzi(indirizzi[x], descrizioni[x]); }
}
// funzione che effettua il geocoding dell'indirizzo stradale e crea il relativo marker completo di descrizione
lunghciclo = descrizioni.length; //variabile di appoggio contenente il numero di elementi del vettore
function codifica_indirizzi(indirizzi, titolo){
geocoder.geocode({ 'address': indirizzi}, function(results, status){
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker
({ map: map,
position: results[0].geometry.location,
title: titolo });
});
}
HTML
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<body onLoad="visualizzamappa();">
<div id="map_canvas"></div>
E questo funziona benissimo, apro la pagina e mi carica la mappa con i due markers.
Poi ho aggiunto un form con città, via, provincia ecc e poi ho fatto:
JAVASCRIPT
function VediLuogo(){
//estraggo valore dati nel form
var citta = document.getElementById("citta").value;
var cap = document.getElementById("cap").value;
var provincia = document.getElementById("provincia").value;
var via = document.getElementById("via").value;
var ncivico = document.getElementById("ncivico").value;
var indirizzoNuovo = citta + " " + cap + " " + provincia + " " + via + " " + ncivico;
var nomeCliente = document.getElementById("nome").value;
var descrizioneNuova = nomeCliente;
indirizzi.push(indirizzoNuovo);
descrizioni.push(descrizioneNuova);
visualizzamappa();
}
HTML
<label id="button_map" onclick="VediLuogo()">Vedi sulla Mappa</label>