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

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.