Spulciandomi la documentazione ufficiale, ho visto che è possibile disegnare su Google Maps includendo nelle nostre pagina una libreria apposita: drawing!

Viene inclusa direttamente con Google Maps, passandolo come parametro:

<script
src="https://maps.googleapis.com/maps/api/js?libraries=drawing">
</script>

Più sotto vi ho messo un esempio di pagina tutto incluso:

  • richiamare la libreria
  • attivare il disegno di:
    • circle
    • rectangle
    • polygon
    • polyline
    • marker
  • settare alcune opzioni generali
  • settare opzioni specifiche per un tipo di disegno (il rettangolo in questo caso)
  • intercettare tre eventi:
    • fine disegno circle
    • fine disegno rectangle
    • fine disegno in generale

Quando parliamo di aggiungere una mappa su un sito web, pensiamo subito a:

  1. Google Maps
  2. Bing Maps
  3. OpenStreetMap (già qualcuno di più scafato però)

Ma in verità ci stanno altre valide alternative.

Una è Leaflet, ottima libreria Javascript scritta da uno dei collaboratori di Mapbox.

La libreria è completa, funziona a layer come OSM, la grafica è gradevole e soprattutto pesa molto poco.

Google Maps lo conosciamo tutti!

E prima o poi tutti i web developer si scontrano con l'autocomplete.

Oggi vediamo come unire le due cose: il risultato sarà una pagina con Google Maps e una casella per l'autocomplete, con i dati presi nel database di Google Maps.

Per fare questo useremo un plugin jQuery apposito: Geocomplete!

Faremo un esempio completo con queste funzionalità:

  • una mappa con un marker di default
  • la possibilità di trascinare il marker
  • nel momento in cui facciamo una nuova ricerca, la mappa si sposterà sul nuovo punto

Avere troppi Marker in una mappa, non è proprio comodo / bello.

In questi casi, la soluzione migliore sarebbe raggrupparli in cluster, e poi usare lo zoom per "espandere" questi cluster.

Farlo è possibile usando una libreria apposita: MarkerClusterer.

In questo articolo avevamo visto come impostare più indirizzi su Google Maps.

Solo che in quel caso gli indirizzi li abbiamo messi a mano, il che non è sempre comodo; pensate ad una mappa con centinaia di indirizzi!

Possiamo, però, risolvere prendendo i dati tramite AJAX!

Da dove li prendiamo ha relativa importanza, l'importante è che siano in formato JSON, che ci facilita di parecchio il lavoro.