Usare Google Maps in Angular

Come sapete ormai per usare qualsiasi strumento di Google avete bisogno di configurare 200 cose.

In questo articolo do per scontato che lo abbiate fatto; compresa la creazione della API_KEY.

Usare Google Maps in JavaFX

Sto creando un piccolo programmino per la visualizzazione delle immagini con JavaFX.

Quello che volevo aggiungere era la possibilità di aprire una finestra con Google Maps centrata sulle coordinate della foto.

Senza entrare nel dettaglio di come reperire le coordinate dalle immagini (sarà argomento di un eventuale altro articolo), vediamo come integrare Google Maps in JavaFX.

In effetti è stato abbastanza semplice usando GMapsFX!

Disegnare su Google Maps con Javascript

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

Leaflet: un'ottima alternativa a Google Maps

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.

Usare l'autocomplete con Google Maps

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

Raggruppare i Marker in Google Maps

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.