Marker personalizzati su Google Maps

Marker personalizzati su Google Maps

Scopriamo come personalizzare il marker (segnalino) tipico di Google Maps rendendo i nostri progetti molto più professionali usando le ultimissime Maps Api v3.0.

Ormai quasi tutti i siti professionali dispongono di una sezione “dove siamo” con relativa mappa di Google Maps. Ma è possibile eliminare l’anti-estetico palloncino rosso e introdurvi magari il logo della propria azienda? Bhè per questo ci vengono in soccorso le APi di sviluppo di Google Maps. La documentazione, vi anticipo, è molto lunga e talvolta complessa. Potete trovarla qui se vi incuriosite e volete approfondire l’argomento.

Partiamo! Alcune nozioni importanti

Ecco alcune linee guida, che non tutti sanno, su Google Maps:

1) Il segnalino (marker) può essere della dimensione che preferite, ma più è grosso e più l’utente finale non saprà localizzarvi con precisione nella via all’interno della mappa. La documentazione ufficiale raccomanda le dimensioni di: 20px (larghezza) X 35px (altezza). Tuttavia ho riscontrato che con 45pxX60px non si ha un grosso scarto di errore e la posizione risulta “riconoscibile”.

2)  La vostra immagine, se lo desiderate, può avere anche uno “shadow” che in pratica è l’ombra del marker.

3) in linea di massima le Api funzionano così: attraverso javascript si “costruisce” la mappa con longitudine e latitudine del negozio/azienda desiderati, dopodichè nel body si crea un div “mappa” dove apparirà la cartina “disegnata” con javascript in precedenza.

Come faccio a trovare longitudine e latitudine della mia attività?

Sì in effetti non è cosa molto semplice, armatevi di righello e compasso e iniziate. Paura eh? xD esiste un modo molto veloce, andate su google maps, aprite esattamente il punto in cui si trova la vostra attività e nella barra degli indirizzi del vostro browser incollate questo codice:

javascript:void(prompt('',gApplication.getMap().getCenter()));

Vi apparirà un popUp indicante i due valori che ci serviranno nel prossimo step.

Costruiamo la nostra mappa

Usate questo script per richiamare le api di Google Maps:

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

Incollate questo codice nel documento prima del tag di chiusura dell’head:

    <script type="text/javascript">

function load(){

  var point = new google.maps.LatLng(TUA LONG, TUA LAT);

  var myMapOptions = {
    zoom: 15, //IMPOSTA LO ZOOM
    center: point,
    mapTypeId: google.maps.MapTypeId.TERRAIN //INDICA IL TIPO DI MAPPA
  };

  var map = new google.maps.Map(document.getElementById("map"),myMapOptions);

  var image = new google.maps.MarkerImage(
    'marker-images/image.png', //NOME DEL VOSTRO MARKER
    new google.maps.Size(100,70),
    new google.maps.Point(0,0),
    new google.maps.Point(75,80)
  );

  var shadow = new google.maps.MarkerImage(
    'marker-images/shadow.png', //NOME DEL SHADOW MARKER
    new google.maps.Size(194,80),
    new google.maps.Point(0,0),
    new google.maps.Point(75,80)
  );

  var shape = {
    coord: [49,5,50,6,51,7,51,8,106,9,107,10,107,11,92,12,116,13,120,14,120,15,126,16,129,17,132,18,134,19,136,20,138,21,140,22,141,23,142,24,143,25,144,26,146,27,147,28,148,29,149,30,149,31,149,32,149,33,149,34,149,35,149,36,149,37,149,38,149,39,149,40,149,41,149,42,149,43,149,44,149,45,149,46,149,47,149,48,149,49,149,50,149,51,149,52,149,53,149,54,149,55,149,56,149,57,149,58,149,59,148,60,146,61,145,62,143,63,141,64,139,65,137,66,135,67,133,68,130,69,127,70,123,71,118,72,114,73,109,74,101,75,87,76,65,76,43,75,41,74,40,73,27,72,26,71,25,70,24,69,13,68,11,67,10,66,10,65,10,64,10,63,8,62,8,61,9,60,8,59,8,58,8,57,7,56,6,55,6,54,5,53,4,52,4,51,4,50,3,49,3,48,3,47,3,46,3,45,3,44,3,43,3,42,3,41,3,40,3,39,3,38,4,37,4,36,5,35,5,34,6,33,5,32,6,31,6,30,6,29,5,28,14,27,9,26,8,25,7,24,7,23,7,22,7,21,7,20,7,19,7,18,8,17,8,16,9,15,9,14,10,13,10,12,12,11,13,10,14,9,15,8,16,7,17,6,17,5,49,5],
    type: 'poly'
  };

  var marker = new google.maps.Marker({
    draggable: false,
    raiseOnDrag: false,
    icon: image,
    shadow: shadow,
    shape: shape,
    map: map,
    position: point
  });

}

</script>

Ecco alcune precisazioni:

Dopo aver inserito i valori di latitudine e longitudine presi in precedenza possiamo impostare lo zoom (da 0 a 30) della mappa, nonchè il tipo di mappa (cartina, terreno etc). Specificate, mi raccomando, anche il percorso del vostro marker.png e della sua relativa shadow. (vedi i commenti al codice).

Nell’html incollate poi questo:

<body onLoad="load()">

<div id="map" style="width:960px;height:300px;margin:40px auto;"></div>

Ovviamente specificate nel div le dimensioni della vostra mappa. Il body onload carica la mappa da noi creata.

Ecco fatto! Facile vero? Se non masticate molto, shadow, api etc potete rivolgervi a questo comodo tool online, caricate il logo della vostra attività e lui vi fornirà tutto il necessario per creare la mappa (lat e long dovrete inserirla voi ovviamente). Personalmente reputo che il tool online è perfetto per farsi creare l’effetto shadow.png (io con photoshop non sono un mago :p)

Spero vi sia di aiuto!

  1. Ottimo articolo veramente!
    Ma ho un problemino, nella mappa che ho inserito purtroppo di default c’è l’opzione “rilievo” che è possibile disabilitare dalla mappa stessa, sai dirmi come disabilitarla definitivamente tramite codice???

  2. Certo!Nello script, dove è indicato il tipo di mappa, basta scrivere ROADMAP invece di TERRAIN, in questo modo si visualizza direttamente la versione MAPPA senza il rilievo 🙂

  3. 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 🙂

  4. Salve, sonon riuscito a far visualizzare diversi Marker su Google maps leggendoli da un database access, dove ho caricato tutte le vie della mia citta, succede però che se un indirizzo non è individuato da Google Maps si blocca lo script e non esegue la visualizzazione. Come faccio a inserire nel codice javascript un controllo di errore che mi salta il record dov’è inserita la via errata e continui la sua lettura delle vie? Spero di essere stato chiaro!

  5. E’ possibile inserire una grandezza dei marker rapportara ad una misura?
    Più grande è questa misura e più grande e il marker…

    Grazie.

  6. ciao complimenti per tuo blog tecnico sempre molto interessante, volevo farti una domanda il link del tools che indichi sopra è vuoto sai per caso se è stato spostato altrove oppure è stato chiuso?grazie mille

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Set icone utili per web designer

Set icone utili per web designer