Google Maps + Ajax

Con l’intruduzione nelle API delle funzioni di Geocoding, il servizio di mapp online di Google e’ diventato ancora piu’ semplice da utilizzare: una vera manna per i programmatori!

In questo articolo illustro brevemente un metodo estremamente semplice (e grezzo) per caricare in maniera asincrona una serie di marker sulla mappa, utilizzando javascript e un piccolo script ASP, richiamando i dati da un database.

Per prima cosa, richiediamo a google una Api Key per utilizzare il servizio: http://www.google.com/apis/maps/signup.html (io ne ho richiesta una per il sito http://127.0.0.1, in modo da poter sviluppare comodamente in ambiente di test) e includere nella pagina il riferimento alle Google Api:

<script src="http://maps.google.com/maps?
file=api&v=2&key=KEY_GENERATA"
type="text/javascript">
</script>

Prossimo passo e’ richiamare le funzioni necessarie alla creazione della mappa, quindi creiamo subito sulla nostra pagina un <DIV> destinato a contenerla

<div id=”mappa” style=”width: 500px; height: 300px”></div>

e un file .js contenente le funzioni a noi necessarie che includeremo nella pagina.

La prima funzione da realizzare sara’ giustamente quella destinata alla creazione della mappa:

var map;

 

function map_create(elemento) {
map=new GMap2(document.getElementById(elemento));
map.setCenter(new GLatLng(41.895466,12.482323),10,G_NORMAL_MAP);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
mapmade=true;
}

…dove elemento sara’ l’ID del <DIV> creato precedentemente. (la mappa viene automaticamente centrata sulla citta’ di Roma con la funzione setCenter).

Ora scriviamo un piccola funzione che ci permettera’ di creare comodamente markers sulla mappa partendo direttamente da un indirizzo, calcolando autonomamente le coordinate di geomapping:

function AddMarkerFromAddress(address, fumetto, titolo) {

var geocoder = new GClientGeocoder();
geocoder.getLatLng(address,
function(point) {
if (!point) {
alert(address + ” not found”);
} else {
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(fumetto);
});
map.addOverlay(marker);
}
}
);

}

(dove address contiene l’indirizzo al quale creare il marker, fumetto il testo, anche HTML, contenuto appunto nel fumetto e titolo l’eventuale titolo del fumetto).

A questo punto non ci rimane che prelevare la lista degli indirizzi dal database e richiamare n volte la funzione AddMarkerFromAddress.

Inanzitutto realizziamo una pagina ASP che accetti in ingresso una query e restituisca una lista dei dati ottenuti eseguendo la query stessa:

<%

response.addHeader “Pragma”, “no-cache”
response.addHeader “Cache-Control”, “must-revalidate”
response.addHeader “Cache-Control”, “no-cache”
response.addHeader “Cache-Control”, “no-store”
Response.AddHeader “Expires”, 0

set con = Server.CreateObject (”ADODB.connection”)
Con.Open Application(”Connessione_Database”)

sql = request(”query”)
set rs = con.Execute(sql)

risultato = “”

do until rs.eof

for i = 0 to rs.Fields.Count – 1

Response.Write rs(i)
if (i < rs.Fields.Count – 1) then Response.Write “, “

next

Response.Write VbLf

rs.movenext
loop
%>

E’ necessaria in seguito del codice Js che si occupi di caricare i dati dalla pagina:

function GetSQLList(query) {
var xmlhttp = getXMLHttpRequestInstance();
if(!xmlhttp) {
alert(”Il browser non supporta l’oggetto XMLHttpRequest”);
return false;
}
var ReturnValue = “0″;

query = escape(query);

xmlhttp.open(”GET”, “make_query_list.asp?query=”+query,false);
xmlhttp.send(null);
if (xmlhttp.status==200) {
ReturnValue = xmlhttp.responseText;
} else if (xmlhttp.status==404) {
alert(”[ERRORE] l’URL non esiste!”);
} else {
alert(”[ERRORE] errore non gestito (” + xmlhttp.status + “)”);
}
return ReturnValue;
}

Ultimo passo, mettere insieme il tutto:

function LoadMarkersFromQuery (query) {
var lista=GetSQLList(query);
var array_lista = lista.split(”\n”);
for (i in array_lista) {
if (array_lista[i] != “”) {
AddMarkerFromAddress(array_lista[i], array_lista[i], array_lista[i]);
}
}
}

Per caricare i marker quindi, bisognera’ semplicemente (dopo aver creato la mappa con la funzione scritta in precedenza) richiamare la funzione LoadMarkersFromQuery passando come parametro il codice SQL necessario al reperimento dei dati degli indirizzi, es:

LoadMarkersFromQuery(’select via, numero, cap, comune, stato from indirizzi’);