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!