Come mettere una mappa nel sito con Google Maps

Visita anche Risorse per i webmaster
archivio di risorse per la creazione dei siti web

Incorporare la mappa

Potete incorporare una mappa prelevando il codice direttamente da Google Maps:
https://www.google.com/maps/


Dopo aver cercato la località che vi interessa, cliccate su "Condividi o incorpora mappa"...
Mappa Google nel sito web
E poi su "Incorpora mappa"....
Mappa Google nel sito web
Aprendo il menu` a tendina, potete anche scegliere la dimensione preferita....
Mappa Google nel sito web

Creare una mappa personalizzata

Sempre da Google Maps avete la possibilita` di creare una mappa personalizzata, con indicatori e anche, se volete, l'itinerario tracciato, più altre opzioni varie. Per fare questo, dovete andare in questa pagina:
https://www.google.com/intl/it_ch/maps/about/mymaps/


Una volta creata la mappa, secondo le vostre esigenze, potete incorporarla nel sito seguendo le indicazioni per la condivisione.
Il file della mappa può essere condiviso anche su Google Drive.

Mappa responsive

Per rendere la mappa responsive, leggi la sezione dedicata agli iframe nella guida: Come includere il contenuto di un file esterno

Mappa attivabile

Per la velocità della pagina, è possibile permettere il primo caricamento della mappa solo dopo il click su un pulsante.
Esempio:


Scarica la risorsa

Street View

È anche possibile incorporare la versione Street View della mappa. Dalla vostra mappa passate, quindi, alla vista Street View e poi cliccate su "Condividi o incorpora immagine"..
Mappa Google nel sito web
Nella finestra che si aprirà, cliccate su "Incorpora immagine", prelevate il codice di incorporamento e incollatelo nella pagina del vostro sito.

Calcolo di un itinerario

Esempio funzionante:

Calcola il tuo itinerario:

Se volete offrire ai vostri visitatori la possibilità di calcolare l'itinerario, potete farlo utilizzando questo codice:
<form action="https://maps.google.com/maps" method="get" target=”_blank”>
Calcola il tuo itinerario:<br>
<input name="saddr" type="text" placeholder="partenza da..">
<input name="daddr" value="15100 Alessandria, AL, Italia" type="hidden">
<input value="Vai!" type="submit"><p></p>
</form>

Possibile anche inserire l'indirizzo completo, in questo modo:
<input name="daddr" value="Via Petrosa, 8, 50019 Sesto Fiorentino FI, Italia" type="hidden">

Nel campo "value" relativo, dovete sostituire l'indirizzo dimostrativo con il vostro indirizzo, usando lo stesso metodo di scrittura. L'indirizzo così compilato è equivale a quello visualizzato nella barra di navigazione del browser dopo aver effettuato la ricerca in Google Maps. Non è obbligatorio inserire tutti i campi.

Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.

Continua con
Leggi tutto