Colnet Sito e SEO Immobiliare | P.IVA 10848460019 | Tel. 347.3606898 | info at colnet.it
colnet sito e seo immobiliare su facebookcolnet web marketing immobiliare su google pluscolnet siti web per agenzie immobiliari su twittercolnet seo e posizionamento immobiliare su linkedin
home » sito web, posizionamento siti, seo e web marketing per tutti

Configurare Google Maps e Street View sul proprio Sito Web

Cosa sono le Google Maps?

google maps per sito webGoogle Maps è un servizio di mappe geografiche offerto da Google che permette di rappresentare gran parte delle città sul proprio sito web o dispositivo mobile.

Le mappe possono essere rappresentate staticamente per mezzo di istantanee fotografiche o dinamiche per mezzo di una moltitudine di immagini navigabili tramite mouse.

Nel secondo caso il browser deve essere abilitato all'uso del javascript (impostazione predefinita), ma forniscono al navigatore un'esperienza molto più avvincente e permettono molte più possibilità.

Tra queste possibilità c'è anche il modo di visualizzare viste panoramiche a 360° di molte località attraverso una caratteristica di Google Maps nota con il nome di Street View.

Analizziamo in dettaglio alcune di queste possibilità riproducibili facilmente su qualunque sito web:
  • creazione di una semplice mappa di Google e Street View
  • applicazione per la determinazione di latitudine e longitudine dato un indirizzo o un punto sulla mappa

Creare una mappa per il proprio sito web con Google Maps e Street View

Per visualizzare una Google Maps e lo Street View sulla pagina del nostro sito web abbiamo bisogno di 3 cose:
  • i 2 contenitori che ospiteranno la Google Maps e lo Street View
  • un'istruzione che richiami la libreria di funzioni per gestire le mappe
  • lo script per la generazione delle mappe
 
 

Questo è il codice html da inserire all'interno della pagina esattamente nel punto in cui vogliamo mostrare la mappa
  1. <div id="dmap1" style="width:660px;height:200px"></div>
  2. <div id="dmap2" style="width:660px;height:200px"></div>
Le 2 righe rappresentano rispettivamente i contenitore della Google Maps e dello Street View.
Ciascuna riga è caratterizzata dai seguenti elementi comuni:
  • nome o identificativo del contenitore ("dmap1" e "dmap2")
  • le dimensioni della mappa (660px di larghezza e 200px di altezza)
Seguono ora le funzione per la generazione della mappa da posizionare preferibilmente a fondo pagina:
  1. <script src="https://maps.google.com/maps/api/js?v=3.11&sensor=false"></script>
  2. <script>
  3. var myOptions = {zoom:16, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControlStyle: google.maps.MapTypeControlStyle.DROPDOWN_MENU, streetViewControl:true};
  4. var map = new google.maps.Map(document.getElementById("dmap1"), myOptions);
  5. var latlng = new google.maps.LatLng(45.07043,7.68670);
  6. var marker = new google.maps.Marker({map:map,position:latlng});
  7. map.setCenter(latlng);
  8. var pOptions = {position: latlng,pov: {heading:0,pitch: 0}};
  9. var p = new google.maps.StreetViewPanorama(document.getElementById('dmap2'),pOptions);
  10. map.setStreetView(p);
  11. </script>
Analizziamo gli elementi più interessanti del codice:
  • riga 3: lo zoom della mappa che varia da 0 (il mondo intero) a 18 (maggior grado di dettaglio non sempre disponibile) (sostituire zoom:16 con il valore desiderato)
  • riga 3: il tipo dello sfondo della mappa che può essere (sostituire ROADMAP con il valore desiderato):
    • ROADMAP: mappa stradale più leggibile
    • SATELLITE: mappa fotografica
    • HYBRID: fonde le caratteristiche delle 2 mappe precedenti
    • TERRAIN: mappa fisica che mette in evidenza rilievi montuosi e corsi d'acqua
  • riga 3: il tipo controllo mappa che può essere (sostituire DROPDOWN_MENU con il valore desiderato):
    • HORIZONTAL_BAR: i comandi formano una pulsantiera orizzontale
    • DROP_DOWN_MENU: i comandi sono racchiusi in un menù a tendina (se le dimensioni della cartina sono minute verrà forzata questa tipologia di controlli)
    • DEFAULT: si adatta alle dimensioni della mappa
  • riga 3: il controllo "street view" se attivato consente di passare dalla navigazione bidimensionale a quella tridimensionale se disponibile per la zona (streetViewControl:false per disattivare la funzionalità)
  • riga 4: nome del contenitore della mappa (sostituire "dmap1" con il nome scelto per il contenitore)
  • riga 5: latitudine e longitudine del centro della mappa (vedere paragrafo successivo per la determinazione di questi 2 valori numerici)
  • righe 8, 9 e 10: queste righe sono necessarie se vogliamo affiancare lo street view alla mappa classica, in caso contrario eliminare queste 3 righe
  • riga 9: nome del contenitore dello steet view (sostituire "dmap2" con il nome scelto per il contenitore)

Per nascondere uno o più controlli di mappa è sufficiente impostare a false il relativo attributo; in particolare per una mappa priva di controlli occorrerà sostituire la variabile myOptions alla riga 3, con quella sottostante, in cui:

  • mapTypeControl è il comando per la modifica del tipo di mappa
  • panControl è il comando per lo spostamento sulla mappa (se vogliamo evitare lo spostamento con il mouse aggiungere draggable:false)
  • zoomControl è il comando per lo zoom della mappa (se vogliamo evitare lo zoom attraverso la rotellina del mouse aggiungere scrollwhell:false)
  • scaleControl è la scala presente nella parte inferiore della mappa
  • streetViewControl è il controllo per accedere alla modalità StreetView
  1. var myOptions = {zoom:16, mapTypeControl:false, panControl:false, zoomControl:false, scaleControl:false, streetViewControl:false};
Cosa fare se non abbiamo accesso al codice html della pagina o il nostro dispositivo non supporta il javascript?
Come detto possiamo ricorrerere alla versione statica delle Google Maps semplicemente utilizzando un indirizzo immagine come questo:
  1. http://maps.googleapis.com/maps/api/staticmap?zoom=13&size=400x300&sensor=false&markers=color:blue%7C45.016650,7.6611449
Se hai problemi a ricostruire le mappe puoi scaricare qui un file html con gli esempi delle mappe che può essere scaricato e aperto con qualsiasi browser in visualizzazione e con un editor di testo tipo notepad per la modifica del codice.
Per la visualizzazione delle Google Maps è necessario il collegamento a internet.

Coordinate geografiche latitudine e longitudine con Google Maps

Latitudine, longitudine e altitudine rappresentano le coordinate geografiche, che servono ad individuare univocamente la posizione di un punto sulla superficie terrestre.
Grazie alla libreria di funzioni di Google Maps possiamo facilmente ottenere la coppia di valori latitudine e longitudine.

Nell'applicazione seguente, inserendo una località nell'apposita casella di testo o spostando il marcatore sulla mappa, visualizzeremo la latitudine e longitudine del punto desiderato.

 
 

L'indirizzo completo deve essere scritto nella forma: provincia comune indirizzo n°civico; in assenza di alcune informazioni andremo a posizionarci in un'ipotetica posizione centrale dell'informazione precedente e quindi in assenza di n°civico individueremo il punto a metà strada, in assenza di indirizzo individueremo il centro del comune e in assenza di comune individueremo il centro della provincia.
I cookie permettono di offrire un servizio migliore, utilizzando il sito accetti l'uso di cookie anche di terze parti.infook