Brainleaf
Web Resources
easyGmap

Sempre più spesso si ha la necessità di caricare delle mappe all'interno di un sito web, soprattutto per le integrazioni con la parte mobile del sito.

In questo articolo vedremo come sfruttare una classe javascript per poter inserire una o più mappe all'interno di una pagina web. Questo tool, scritto da noi, si chiama easyGmap ed è scaricabile dai link presenti in questa pagina o direttamente dalla home del prodotto http://factory.brainleaf.eu/tools/jquery/easy-gmap/

Il gioco è semplice, prima di tutto si dovrà procedere all'installazione di easyGmap che richiede, come dipendenze, di includere nella pagina anche jQuery e le API di Google Maps.


<head>
  <script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="/easyGmap.js"></script>
</head>

Dopo aver installato easyGmap nella pagina, dovrete decidere dove inserire la mappa e procedere con l'inserimento di un div dedicato che funga da cornice. Al div dovrà essere associato un id univoco. Ricordate che il div contenitore della mappa deve avere un'altezza specificata da CSS.


<div id="mapId" class="yourClass"></div>

Come ultimo passaggio si dovrà personalizzare e inizializzare la mappa con del codice javascript. Per passare dati alla funzione sarà necessario creare un oggetto che in questo esempio chiameremo opts.
All'interno dell oggetto di configurazione sarà possibile specificare l'id della cornice, latitudine e longitudine del marker e molto altro.
Da sottolineare la possibilità di personalizzare stile e contenuto del box di info che compare al click sul marker della mappa


var opts = {
    elementId: 'mapWrapper',
    mapLat: 40.758891,
    mapLong: -73.985142,
    mapZoom: 18,
    infoBoxTitle: 'This is Times Square',
    infoBoxDescription: 'Go to Times Square in New York',
    markerTitle: 'Times Square',
    markerIcon: '' // custom image
}

$(window).load(function(){
   var map = new easyGMap(opts).getMap();
});


Come potete vedere l'uso di questo tool è veramente semplice.
È anche possibile caricare un numero potenzialmente infinito di mappe personalizzate. Nella home del tool potrete vedere alcune demo di mappe caricate con easyGmap.

Demo Download easyGmap - version 0.6.0

Joomla SEF URLs by Artio