La combinazione della geolocalizzazione HTML5 con le API JavaScript di Google Maps consente di realizzare applicazioni web dinamiche capaci di rilevare la posizione dell’utente e visualizzare attività commerciali nelle vicinanze. In questa guida analizzeremo passo dopo passo come farlo.
1. Ottenere la posizione dell’utente con l’API Geolocation
L’API Geolocation è una funzionalità nativa dei browser moderni che consente di ottenere la posizione corrente dell’utente, previa autorizzazione esplicita. Ecco un esempio base:
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
  alert("Geolocalizzazione non supportata dal browser.");
}
function successCallback(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  console.log("Latitudine:", latitude, "Longitudine:", longitude);
}
function errorCallback(error) {
  console.error("Errore nella geolocalizzazione:", error);
}
2. Configurare Google Maps con JavaScript API
Per utilizzare le API di Google Maps, è necessario ottenere una chiave API da Google Cloud Console e includere il file JavaScript:
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"></script>
La funzione initMap sarà il punto di partenza per creare e configurare la mappa.
3. Visualizzare la mappa centrata sull’utente
Una volta ottenute le coordinate, puoi creare una mappa centrata sulla posizione dell’utente:
let map;
function initMap() {
  navigator.geolocation.getCurrentPosition(function(position) {
    const userLocation = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
    map = new google.maps.Map(document.getElementById("map"), {
      center: userLocation,
      zoom: 15
    });
    new google.maps.Marker({
      position: userLocation,
      map: map,
      title: "Sei qui"
    });
    findStores(userLocation);
  });
}
4. Cercare esercizi commerciali vicini con Places API
La Places Library consente di effettuare ricerche nei dintorni specificando tipi di luoghi, come ristoranti, bar, supermercati, ecc.
function findStores(location) {
  const service = new google.maps.places.PlacesService(map);
  const request = {
    location: location,
    radius: 1000, // in metri
    type: ["store"] // oppure ["restaurant", "cafe", "bar"]
  };
  service.nearbySearch(request, function(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (let i = 0; i < results.length; i++) {
        const place = results[i];
        creaMarker(place);
      }
    }
  });
}
function creaMarker(place) {
  new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    title: place.name
  });
}
5. Aggiungere il contenitore della mappa
Per mostrare la mappa nella tua pagina, aggiungi un elemento HTML con un ID specifico:
<div id="map" style="width: 100%; height: 500px;"></div>
6. Considerazioni sulla privacy e performance
- Chiedi sempre esplicitamente il consenso per la geolocalizzazione.
- Evita richieste ripetute alla geolocalizzazione; salva la posizione una volta ottenuta.
- Imposta limiti di tempo o fallback in caso di mancata risposta del browser.
Conclusioni
L’integrazione tra l’API di geolocalizzazione del browser e Google Maps consente di creare esperienze interattive localizzate. Che si tratti di mostrare negozi, punti d’interesse o attività commerciali, questa combinazione di tecnologie offre un’enorme potenzialità per migliorare la rilevanza geografica dei tuoi contenuti web.