Introduzione alle Yahoo! Maps

Sempre stimolato da digitaladoptive, unico antidoto contro la cronica mancanza di tempo necessaria per riempire di contenuti questo blog, stavolta voglio introdurre ai neofiti del mashup le API di Yahoo! Maps.
Per chi ha avuto la pazienza di leggere i miei post riguardanti le API di Google Maps, si accorgerà che i metodi e le sintassi sono molto molto simili.
Il semplice obiettivo di questo post è di inserire una Yahoo! Map, centrata in un particolare punto del globo terracqueo, in una pagina web.
Per iniziare a lavorare, abbiamo bisogno di un account Yahoo! su quale chiedere una chiave (“application id“). Almeno nelle prime fasi, non avremo bisogno di uno spazio web: a differenza delle API di Google Maps, le API di Yahoo! Maps lavorano anche in locale, cioè sul proprio PC (purchè collegato alla Rete, evidentemente)

Per chiedere la chiave, come si diceva, è necessario avere un account Yahoo! e andare alla seguente pagina

Si presenterà la seguente schermata dove inserire alcuni dati:

Alcune delucidazioni:

1. Il Vostro account Yahoo! apparirà di default
2. Selezionate “Generic”
3. Potete inserire qualunque cosa
4. Potete inserire qualunque cosa
5. Non è un campo obbligatorio ma, a vostra futura memoria, suggerisco di inserire l’indirizzo della pagina web dove inserirete la mappa
6. Inserite la vostra e-mail
7. Inserite una breve descrizione

Il resto non consideratelo.

Nella pagina che segue otterrete una stringa di caratteri che copierete nel codice qui in basso dove indicato.

Il codice è diffusamente commentato, non dovreste avere problemi di comprensione (ma sono qui a vostra disposizione!)

<head>
<script type=”text/javascript” src=”http://api.maps.yahoo.com/ajaxymap?v=3.0&appid= INSERITE_QUI_LA_YAHOO_ID_RICHIESTA_SUL_SITO”></script>

<!– Definizione struttura pagina: messa la mappa di dimensioni 550×450 px //–>

<style type=”text/css”>
#spaziomappa {
width: 550px;
height: 450px;
align: center;}
</style>

</head>

<body>
<div id=”spaziomappa” align=”center”></div>
<script type=”text/javascript”>

// centra la mappa alle coordinate indicate (lat, long)
var lat = 44.063889;
var long = 9.883333;

// definizione coppia di coordinate che identificano il Golfo della Spezia
var punto = new YGeoPoint(lat, long);
var livellozoom = 7

// Definisce l’oggetto map che caricherà una mappa nell’elemento “spaziomappa” della pagina web
var map = new YMap(document.getElementById(‘spaziomappa’));

// Aggiunge la barra di controllo che consente tre tipi di visualizzazione:
// cartina (REG), satellite (SAT) e ibrida (HYB)
map.addTypeControl();

// Aggiunge il controllo per lo zoom
map.addZoomLong();

// Imposta il tipo di mappa, in questo caso ibrida; per altri tipi di visualizzazione
// Si può usare SAT (satellite) o REG (cartina)
map.setMapType(YAHOO_MAP_HYB);

// Mostra la mappa centrata alle coordinate definite dalla variabile ‘punto’al
// livello 7 di zoom
map.drawZoomAndCenter(punto, livellozoom);

</script>
</body>

Il risultato lo potete trovare qui.
Nelle prossime puntate cercheremo di fare qualcosa di più, per adesso mi limito a suggerirvi i links alla documentazione ufficiale di Yahoo! Maps API (inglese):

Annunci

1 Response to “Introduzione alle Yahoo! Maps”


  1. 1 Carlo 26 novembre 2009 alle 2:48 pm

    sempre prezioso il tuo contributo! thanx


Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...




Creative Commons License
Questo/a opera è pubblicato sotto una Licenza Creative Commons.

Addthis

AddThis Social Bookmark Button

Flickr Photos

Moods of blue

High heels

Altre foto

%d blogger hanno fatto clic su Mi Piace per questo: