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 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 550x450 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):
Post
