Area sviluppo Tesene

Dopo aver fatto una demo che coinvolge vari concetti, procediamo con una serie di guide che descrivano passo passo le operazioni che si possono fare usando le Google Maps API. In questo primo tutorial, vedremo come si visualizza una mappa di una certa zona, come si inserisce un segnalino per indicare un punto specifico, e come si crea una info Window con dentro del codice HTML arbitrario.

Cominciamo, segnalando che esiste un Wizard all'indirizzo: http://www.google.com/uds/solutions/wizards/mapsearch.html che può esaurire le esigenze di chi non fa uso professionale del Web e vuole semplicemente mettere nelle proprie pagine personali l'indicazione di dove abita.

All'estremo opposto, c'è la documentazione ufficiale di Google http://www.google.com/apis/maps/documentation/, ma non è esattamente il punto migliore da cui cominciare.

A parte i dettagli per gestire i casi in cui il browser non supporti le Google Maps o non abbia javascript attivo, il codice necessario è il seguente:

//crea mappa
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//centra la mappa sulle coordinate di interesse e con lo zoom desiderato
//0 è lo zoom minimo e 18 quello massimo
map.setCenter(new GLatLng(43.726592, 10.419202),9);

// Definisce punto di coordinate desiderate       
var point = new GLatLng(43.726592, 10.419202);     
// Crea Marker associato al punto, in modo che cliccandoci sopra compaia il testo HTML scritto tra apici
var marker = createMarker(point,'<img xsrc="http://www.tesene.it/img/up_01.gif"/><h1>Tesene srl</h1><div style="width:240px">Azienda leader nel settore delle Tecnologie Web.</div>')     
//inserisce marcatore sulla mappa
map.addOverlay(marker);

Vedi esempio funzionante

Esempio con mappa ibrida.

Questo articolo è stato pubblicato Lunedì, 21 Maggio 2007 alle 06:51 e classificato in Javascript, Maps. Puoi seguire i commenti a questo articolo tramite il feed RSS 2.0. Puoi inviare un commento, o fare un trackback dal tuo sito.