Utilizzare la geolocalizzazione del browser e le API di Google Maps per mostrare esercizi commerciali locali

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.

Torna su