GoogleMap in uno UserControl per Asp.Net

June 29th, 2008

Gmapcontrol ScreenShotIn rete c’è più di una soluzione per combinare GoogleMap ed Asp.Net ma spesso sono a pagamento oppure portano in dote fastidiose pubblicità. Ho quindi deciso di cominciare a scrivere un controllo tutto mio, il quale permette di sfruttare solo pochi aspetti del servizio in questione ma che spero di far evolvere nel tempo libero.

L’utilizzo del controllo è molto semplice, dopo averlo registrato è possible inserirlo nella pagina con il seguente codice di esempio.

<gmnet:map ID="mymap" runat="server" zoom="7" centerlat="40.6133"
centerlon="14.2525" />

L’attributo zoom rappresenta l’ingradimento della mappa e può variare da 0(massimo dettaglio ) a 12(Visione di tutto il globo), mentre centerlat e centerlon sono le coordinate geografiche del punto sul quale sarà centrata la mappa. Altri attributi possibili sono mapControl, che definisce i controlli di cui dotare la mappa, ed height e width che rappresentano la grandezza.
Le modifiche agli attributi possono essere fatte anche da codice come segue.


mymap.setSize(400,400);
mymap.setMapControls(map.GSmallZoomControl);

Nello spezzone appena mostrato viene settata la grandezza della mappa a 400×400 pixel con il metodo setSize, successivamente vengono inseriti i controlli SmallZoom, ovvero le frecce di movimento sulla mappa ed i tasti di zoom-in e zoom-out, tutti i possibili valori da passare a setMapControls sono definiti come membri statici nella classe map con nomi del tipo GxxxxxxxControl.

Delle tante funzionalità di GoogleMap i Marker sono la prima funzionalità complessa di lavoro sulla mappa implementata da questo controllo. Per creare un marker è necessario passare al costruttore le coordinate geografice della posizione in cui piazzarlo e una stringa che sarà visualizzata al click su di esso come in figura.


new Marker(14.4032, 40.8011, "Un punto nel Golfo")

Mentre per inserire dei marker è necessario creare un’ArrayList ed e passarlo al metodo setMarker. E’ quindi facile immaginare come sia semplice piazzare marker in base a dati letti da un database.

ArrayList markers = new ArrayList();
markers.Add(new Marker(14.2032, 40.9021, "A place..."));
markers.Add(new Marker(14.4032, 40.8011, "Another Place!"));
mymap.setMarkers(markers);

Spero in futuro di aggiungere buona parte delle funzionalità di GoogleMap, il prossimo step sarà quello di dare la posibilità di usare icone diverse per ogni marker e disegnare qualche polilinea. Per chi volesse divertirsi con le primisissime righe di codice scritte puo effettuarne qui il download.

Posted in Web Building | No Comments »