Google Maps: come aggiungere sulla mappa un segnaposto personalizzato

Aggiornato il

Aggiornamento (dicembre 2013): se sei interessato a scoprire un’alternativa pratica e veloce a Google Maps, forse può interessarti un nuovo tutorial che ho scritto, che spiega come creare una mappa con la libreria Leaflet!

Google Maps, segnaposto personalizzato

Cos’è un segnaposto?

I segnaposto di Google (in inglese markers) vengono utilizzati per indicare una posizione su una mappa interattiva: cliccandoci sopra è possibile reperire informazioni supplementari riferite al luogo geografico in questione (indirizzo, indicazioni stradali, immagini correlate, ecc.).
Mentre è molto facile incorporare in un sito web una mappa riportante un segnaposto noto (lo si può fare direttamente da Google Maps), risulta meno intuitivo crearne uno personalizzato, del quale cioè siamo noi a deciderne la specifica posizione (ad esempio nel caso in cui un indirizzo o una strada non siano ancora presenti sulla mappa).
Per farlo serve un minimo di conoscenza di JavaScript, necessaria per "giochicchiare" con le API di Google Maps (API è l’acronimo di Application Programming Interface).

Il codice: contenitore, CSS, scripts

Per prima cosa, serve definire all’interno della nostra pagina HTML il contenitore che ospiterà la mappa: in questo caso un <div> che identificheremo con un id del valore di gmaps-canvas.


<div id="gmaps-canvas"></div>

Le caratteristiche di tale contenitore, tra cui le dimensioni, sono definite direttamente nel file CSS:


div#gmaps-canvas {

    width:775px;	
    height:300px;
}

A questo punto serve importare un po’ di codice dai server di Google, e per farlo basta inserire nel tag <head> della nostra pagina il seguente script:


<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Al termine della riga di codice abbiamo indicato sensor=false (e non ad esempio true): il parametro sensor determina se il sito ha intenzione di usare un "sensore" per localizzare l’utente, cioè il visitatore. E’ una finalità molto comoda in caso di applicazioni mobile, ma in questo caso non ci interessa.
Non ci rimane adesso che impostare la funzione che andrà a creare fisicamente la nostra mappa e il nostro marker: anche essa deve essere posizionata all’interno del tag <head>.


<script type="text/javascript">
	function initialize() {
    
	}
</script>

Inoltre, tale funzione deve essere "attivata" al caricamento stesso della pagina, e questo significa aggiungere l’attributo onload="initialize()" all’apertura del tag <body>:


<body onload="initialize()">

Creazione della mappa: posizione, zoom, centratura, tipo di mappa

La prima cosa da specificare all’interno della funzione initialize() è la posizione: dichiaro quindi la variabile myLatLng, che registra la latitudine e la longitudine esatte del luogo che voglio indicare (in questo caso 40.719614,-73.996251).


var myLatLng = new google.maps.LatLng(40.719614,-73.996251);

Tali coordinate sono reperibili direttamente da Google Maps: basta centrare il punto esatto cliccando con il tasto destro del mouse sulla mappa (Fig. 1), schiacciare l’icona del collegamento in alto a sinistra (la "catenella") e copiare negli appunti le coordinate esatte (Fig. 2).

Centrare la mappa di Google in un punto preciso

Fig. 1: Una volta individuato il punto esatto, utilizzare il tasto destro del mouse per centrare la mappa

Recuperare le coordinate esatte del punto da Google Maps

Fig. 2: Cliccare sull’icona del link per reperire le coordinate

Dentro la variabile myOptions dobbiamo specificare alcune cose: lo zoom (un numero compreso tra 0 e 18, dove 1 è la messa a fuoco più lontana e 18 quella più vicino al suolo), il centro della nostra mappa (sfruttiamo ancora il valore della variabile myLatLng), e il tipo di mappa che vogliamo rappresentare. Per quest’ultima opzione utilizziamo ROADMAP (le alternative disponibili sono SATELLITE, HYBRID e TERRAIN).


var myOptions = {
    zoom: 14,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

L’ultima riga di codice serve infine a creare la mappa vera e propria all’interno del nostro <div> contenitore. In questo caso inseriamo 2 parametri: id dell’oggetto che conterrà la nostra mappa e variabile myOptions (che riporta le opzioni precedentemente specificate).


var map = new google.maps.Map(document.getElementById("gmaps-canvas"), myOptions);

Ecco quindi la funzione initialize() aggiornata con i comandi appena inseriti:


function initialize() {
  var myLatLng = new google.maps.LatLng(40.719614,-73.996251);
  var myOptions = {
      zoom: 14,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("gmaps-canvas"), myOptions);
}

Nel caso ci interessasse mostrare solamente la mappa, potremmo fermarci qui.

Creazione del marker

Per creare un segnaposto, basta dichiarare una nuova variabile che chiamiamo marker della quale specifichiamo almeno posizione (usiamo ancora myLatLng) e mappa sulla quale il segnaposto si posizionerà (cioè la variabile map: la nostra mappa). Sebbene facoltativo, ho introdotto anche un parametro title a cui ho aggiunto del testo: quando il mouse passerà sopra il segnaposto, apparirà il classico riquadro giallo riportante il testo inserito.


var marker = new google.maps.Marker({
    position: myLatLng, 
    map: map,
    title:"Mi trovo a New York, nei pressi di Mott Street"
});

Aggiungere la nuvoletta

La classica nuvoletta con le informazioni si chiama invece in gergo tecnico info window, e si crea con questi semplici comandi:


var contentString = '<em>Sono qui!</em>';
var infoWindow = new google.maps.InfoWindow({
    content: contentString
});

In questo caso, la variabile contentString, richiamata all’interno della stessa variabile infoWindow, ospiterà il testo della nuvoletta (il linguaggio utilizzato è l’HTML). Rimane solo un’ultima cosa: fare in modo che al click del mouse sul segnaposto la nuvoletta si apra (in caso contrario rimarrà invisibile).


google.maps.event.addListener(marker, 'click', function() {
    infoWindow.open(map,marker);
});

E con la crezione di questo evento, l’esercizio è finito! Si potrebbero aggiungere al progetto altri mille aspetti, per i quali rimando alla documentazione completa di Google Maps.

La pagina web al completo

Ecco qui tutto il codice finora creato per la nostra pagina web:


<!DOCTYPE html>
<html lang="it">

<head>

<title>Segnaposto personalizzato</title>
<style type="text/css">

	div#gmaps-canvas {
	
		width:775px;	
		height:300px;
	}

</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
	  
    var myLatLng = new google.maps.LatLng(40.719614,-73.996251);
    var myOptions = {
	zoom: 14,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
	
    var map = new google.maps.Map(document.getElementById("gmaps-canvas"), myOptions);
    
    var marker = new google.maps.Marker({
        position: myLatLng, 
        map: map,
        title:"Mi trovo a New York, nei pressi di Mott Street"
    });
	
    var contentString = '<em>Sono qui!</em>';
    var infoWindow = new google.maps.InfoWindow({
        content: contentString
    });
	
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.open(map,marker);
    });   
  }
</script>

</head>

<body onload="initialize()">
<div id="gmaps-canvas"></div>
</body>

</html>

La pagina dei contatti di un progetto che ho realizzato di recente è un esempio funzionante di questo tutorial.

Aggiornamento (gennaio 2014): navigando qua e là ho trovato Google Map Builder, un tool per creare mappe di Google attraverso un’interfaccia visiva chiara e intuitiva. Per i progetti più semplici può essere davvero molto comodo.

Approfondimenti

di Mattia Frigeri

COMMENTI

  • Ciao, ottima guida, adesso il mio problema è un altro, vorrei che la mia mappa fosse pulita cioè senza i tasti zoom + e – ed eliminare anche i due pulsanti per le opzioni MAP e SATELLITE, puoi darmi qualche dritta?grazie in anticipo :)

    • Ciao Giovanni, innanzitutto grazie dei complimenti. Personalmente non ho mai provato a farlo, e comunque dovresti chiederti se rimane l’opzione migliore (sono features molto comode quelle che vuoi rimuovere). Assodato questo, non c’è nulla di meglio che sperimentare. Girando online qua e là, ho trovato un articolo che sembra rispondere alla tua domanda. Pare basti aggiornare la variabile myOptions:

      
      var myOptions = {
            center: myLatlng,
            zoom: 15,
            mapTypeControl: false,
            draggable: false,
            scaleControl: false,
            scrollwheel: false,
            navigationControl: false,
            streetViewControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
       };
      
      

      A questo link trovi l’articolo in questione: al suo interno c’è tutta la spiegazione. In bocca la lupo!

    • Ciao Jessica,

      e grazie. Ricordo che tempo fa mi era successa esattamente la stessa cosa, con la stessa forma di “spezzettatura” della mappa.
      Purtroppo non ricordo invece come l’avevo risolta. Senza vedere direttamente il tuo codice, è difficle dirti cosa possa essere a causare questo bug. Per caso riesci a mettere la pagina online?
      Hai controllato anche se il problema ti succede con un browser in particolare o con tutti?

  • Ciao, grazie per questo post, ho così avuto la possibilità di inserire la mappa sul mio sito. Ho però un problema, io dovrei inserire 2 mappe diverse nella stessa pagina, separate da alcune frasi (sono una nutrizionista e vorrei ci fossero le mappe di entrambi gli studi dove ricevo). Il fatto è che non ci riesco, mi appare la prima mappa (che però rappresenta quella sbagliata) e al posto della second mappa mi rimane un rettangolo bianco. Come devo fare?
    Grazie

    • Ciao Alessandra, detta così non posso aiutarti molto! Per caso hai un link al sito che hai realizzato?
      In alternativa, ho scoperto di recente questo ottimo plugin per inserire mappe interattive sul proprio sito, consigliatomi da un mio ex studente. Ti consiglio di darci un occhio perché è davvero molto intuitivo, e potrebbe fare al caso tuo: http://www.mapbox.com. Google Maps è potente, ma un po’ più “rognoso” da impostare!

  • Ciao Mattia, ho seguito la spiegazione nei minimi dettagli, ma vorrei chiederti dove posso cambiare colore nella nuvoletta e se è possibile mandare a capo il testo a riguardo.
    Vorrei mettere il nome della ditta ed i suoi recapiti, andando a capo ogni riferimento, è possibile? Grazie dell’aiuto.

    • Ciao Roberto,

      è certo possibile mandare il testo a capo all’interno della nuvoletta, conoscendo un minimo di HTML. Ad esempio, modificando il contenuto della variabile contentString in questo modo (sfruttando cioè il tag <br>):

      
      var contentString = 'Intestazione Azienda <br> Indirizzo <br> recapito telefonico <br> email';
      
      

      Per quanto riguarda invece il colore di sfondo, potresti usare un trucco e cambiare colore di sfondo al contenuto interno (sfruttando un po’ di CSS inline dentro all’HTML, così come hai mandato a capo il testo), ottenendo qualcosa come questo:

      http://stackoverflow.com/questions/18014520/how-to-change-google-maps-infowindow-propreties

      Se controlli il link, vedrai anche la spiegazione.
      La cosa migliore da fare, però, è quella di cambiare totalmente tecnica e sfruttare le API di Gmaps per creare un oggetto di tipo InfoBox:

      http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html

      Esso infatti permette una maggiore customizzazione di InfoWindow, in quanto una sua estensione. Meriterebbe un tutorial a parte… ma sono convinto che sulla documentazione di Gmaps ci siano un sacco di esempi illustrati passo per passo.

      Buon lavoro!

      • Grazie infinite x la tua tempestiva risposta e scusa se ti ho chiamato Giovanni, ma nella fretta di scriverti e soprattutto di avere delucidazioni, ho fatto un po di caos.

  • Ciao Mattia,
    Si possono aggiungere marker dopo aver creato già la mappa, cioè una volta creata la mappa posso aggiungere dei marker dal div “gmap-canvas”?
    Grazie dell’aiuto.

    • Ciao Davide, puoi certamente aggiungere quanti markers desideri.
      Credo basti inserire nel codice una seconda variabile di tipo marker:

      
      var marker_bis = new google.maps.Marker({
          position: myLatLng_bis, 
          map: map,
          title:"Mi trovo a New York, nei pressi di Broadway"
      });
      
      

      Naturalmente, ricordati di creare anche le coordinate della variabile myLatLng_bis (in questo caso, dovrebbe trovarsi nella via vicina, cioè Broadway).

  • Ciao!! Ottimo tutorial!!!
    Ne approfitto per chiederti se hai mai avuto problemi sul numero di marker da visualizzare? Esiste un limite? Nel mio sito oltre gli 8 nn li visualizza mentre se vai sul sito http://www.commercialista.com e cerchi su roma esce un esagerazione di marker…

  • Ciao Mattia,
    ho trovato molto interessante e chiara la tua guida e mi interesserebbe approfondire le modalità con cui è possibile rappresentare sulla mappa che viene visualizzata anche una serie di indirizzi (e relativi segnaposti), oltre alla posizione rilevata dal sensore.
    Grazie mille e tanti complimenti
    Andrea

    • Ciao Andrea, grazie dei complimenti.
      Vedo però che parli di “sensore”, quindi suppongo la tua richiesta sia collegata all’utilizzo di un dispositivo portatile. L’esempio di questo tutorial, invece, è relativo a una qualunque pagina pubblicata su un sito statico.

  • Ciao, aiutatemi perchè non riesco a impostare la mappa.
    Mi da degli errori nell’HTML

    • Ciao, detta così non saprei proprio come aiutarti. Riesci a spiegare nel dettaglio il tuo tipo problema, magari inserendo un link al progetto che stai seguendo?

  • Ciao e complimenti per questo articolo. Finalmente uno chiaro e preciso con le spiegazioni e non codice buttato li per copiarlo e basta.
    Volevo farti una domanda: ho visto un sito web in cui è presente una mappa un po particolare. In pratica fa il percorso tra una serie di marker selezionabili da una casella di riepilogo e un indirizzo personalizzato. Com’è possibile secondo te il recupero delle coordinate esatte dall’indirizzo personalizzato inserito? Ho provato a cercare un po in giro ma non ho trovato molto. Ho provato a leggere il codice di quel sito e… è un filino incasinato.
    Ti linko il sito in questione: http://www.oggi-sposi.com/sites/daniloesimona/map.html.

    • Ciao Marco, e grazie dei complimenti. Purtroppo non so rispondere alla tua domanda: bisognerebbe studiare per bene le API di Google e farsi affiancare (meglio ancora) da un programmatore puro.

  • Ciao, veramente interessante il tutto. Grazie a te ho potuto mettere in una pagina la mappa per individuare il marker del mio orticello. Purtroppo nella suddetta pagina non appare la possibilità di avere le indicazioni stradali per arrivare al marker suddetto. Questo è il link alla pagina: http://www.netman.it/antomappa/.
    Dovendo postare il link ai miei amici, come fanno ad arrivarci?
    Grazie, Antonello.

    • Ciao Antonello, sicuramente tra le API di Google sulle direzioni puoi trovare la soluzione, prova a controllare!
      In ogni caso, non credo sia la soluzione più comoda per la tua pagina: ad esempio, perché non incorporare semplicemente la mappa di Google? Una volta trovato il punto, ti basta cliccare in basso sull’icona della “rotellina”> condividi e incorpora mappa > incorpora mappa. A quel punto copi il tag iframe nella tua pagina e il gioco è fatto (saranno presenti anche le indicazioni stradali).

  • Gentile Mattia Frigeri,
    intanto volevo farti i complimenti per l’articolo, veramente semplice e spiegato nel modo giusto, poi vorrei comunque porti 2 “domandine”:
    1) Come si fa a basare la geolocalizzazione su un indirizzo invece che su longitudine e latitudine?
    2) Se è possibile far calcolare tramite le api google un percorso, magari il percorso minimo?

    Grazie per l’attenzione,
    David

    • Caro David, grazie a te. Purtroppo devo confessarti che non ho mai approfondito così tanto l’argomento per poter rispondere in modo professionale ai tuoi quesiti. Come mai, però, vuoi basare la geolocalizzazione della mappa su un indirizzo? Non é meglio le coordinate di quell’indirizzo? La tua seconda domanda tratta aspetti prettamente “di programmazione”, che esulano dal mio campo. Mi dispiace davvero!