Guardiamo il mondo dall’alto
Integrare una mappa di google in un codice HTML è semplicissimo.
Per prima cosa dobbiamo andare su Google Maps per ottenere l’API key che è una chiave univoca per un solo dominio con la quale potremo generare lo script da inserire.
A questo punto basterà accettare i termini di utilizzo, inserire il proprio dominio e cliccare su GENERATE API KEY.
Se non siete connessi in Google, vi verrà chiesto di effettuare il login con il vostro account.
L’API key ha una struttura alfanumerica ed è stata generata per essere usata solo sul vostro url di riferimento.
Ho sempre pensato che in certe situazioni la pratica valga più della grammatica ed è questo il caso, per questo vi riporto un codice d’esempio che potrete tranquillamente scaricare e modificare a vostro piacimento.
Per chi ne avesse bisogno riporto, qui sotto il codice commentato:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Esempio applicazione Google Maps</title>
<!– Questo blocco di codice è essenziale per sfruttare il servizio – dove vedete ;key= dovete inserire la vostra API key, ricordatevi gli “ in fondo!!! –>
<script src=”http://maps.google.com/maps?file=api&v=2&sensor=false&key=inserite la vostra chiave” type=”text/javascript”></script>
<!– In questo Script si regola tutta la visualizzazione delle opzioni della Mappa –>
<script type=”text/javascript”>
/* Inizializziamo la funzione …. */
function initialize() {
/* … se compatibile col Browser allora generi la mappa */
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map_canvas”));
/* Dove vuoi centrarla? GLatLng permette di inserire la Latitudine e Longitudine del punto da far visualizzare, ovvero le Coordinate di partenza. */
map.setCenter(new GLatLng(Latitudine, Longitudine), Risoluzione Mappa);
Esatto è quello che stai pensando!! Come faccio a trovare le Coordinate? A questo link troverai tutto quello che tiserve.
/*Settaggio dei controlli di Default quali, Zoom e tipo di Visualizzazione*/
map.setUIToDefault();
/* Google mette a disposizione diverse opzioni per personalizzare la vostra mappa, di seguito vi riporto l’elenco:
map.setMapType(mioTipoDiMappa); —-> è il codice da sostituire a map.setUIToDefault(); e mioTipoDiMappa è una delle seguenti opzioni:
- G_NORMAL_MAP – mappa stradale
- G_SATELLITE_MAP – visualizzazione da satellite
- G_HYBRID_MAP – mix tra satellite e stradale
- G_DEFAULT_MAP_TYPES – controlli di default per la mappa
- G_PHYSICAL_MAP – visualizzazione da terreno
Per gli amanti della Luna ci sono i seguenti controlli:
- G_MOON_ELEVATION_MAP – superficie lunare con colorazione in base all’altitudine
- G_MOON_VISIBLE_MAP – orbita attorno alla luna
Perchè non dare un’occhio anche a Marte??
- G_MARS_ELEVATION_MAP – superficie di Marte con colorazione in base all’altitudine
- G_MARS_VISIBLE_MAP – orbita attorno a Marte
- G_MARS_INFRARED_MAP – zone d’ombra e rilevamenti di temperatura sulla superfice di Marte
Possiamo guardare anche il cielo con l’istruzione:
- G_SKY_VISIBLE_MAP
*/
}
}
</script>
</head>
<!– Ricordatevi sempre di caricare la mappa al load della pagina, quindi nel Body inserite onload=”initialize()” onunload=”GUnload()”–>
<body onload=”initialize()” onunload=”GUnload()”>
<!– Qui vengono riportate le dimensioni della Mappa che potrete Modificare a piacimento RICORDATEVI che se cambiate dimensioni dovete mette la misura in PIXEL –>
<div id=”map_canvas” style=”width: 800px; height: 600px”></div>
</body>
</html>
L’esempio riportato è molto banale ma vedremo poi nei prossimi articoli come personalizzarle e sfuttarle al meglio con un pò di Javascript e Ajax.
Altri articoli correlati:
Alberto TrussardiFondatore del progetto webfandom, è un Web Designer freelance di Bergamo che collabora in tutta Italia con diverse aziende nel campo dello sviluppo web e marketing online. Ama l’arte e la poesia, due ottime compagne che lo aiutano a trovare ispirazione per i lavori che svolge.
![Oltre 100 paper texture gratuite che potranno aiutarti a migliorare i background dei tuoi progetti grafici + [tutorial su come creare un effetto vintage a un foglio di carta]](http://www.webfandom.com/wp-content/uploads/2010/05/texture_vecchia_carta-150x150.jpg "Oltre 100 paper texture gratuite che potranno aiutarti a migliorare i background dei tuoi progetti grafici + [tutorial su come creare un effetto vintage a un foglio di carta]")
Ancora nessun commento.
LASCIA UN COMMENTO