Inizia

Segui questi passaggi per aggiungere la libreria di contesto locale al progetto, inizializzare e configurare la visualizzazione mappa del contesto locale.

Abilitazione delle API e degli SDK richiesti

Per utilizzare la libreria di contesto locale, devi abilitare l'API Maps JavaScript e l'API Places. A tale scopo, segui le istruzioni per attivare uno o più SDK o API. Tieni presente che entrambe le API devono essere abilitate nello stesso progetto nella console Google Cloud.

Caricamento della libreria di contesto locale

Per caricare la libreria di contesto locale, carica l'API Maps JavaScript come faresti normalmente e includi i seguenti parametri:

  • libraries=localContext carica la libreria di contesto locale.
  • Per utilizzare questa release è necessario v=beta.
  • key contiene la chiave API.
  • callback esegue la funzione initMap().

L'esempio seguente mostra un tag script con tutte le opzioni precedenti:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext&v=beta&callback=initMap">
</script>

Creazione di una nuova visualizzazione della mappa del contesto locale

Per aggiungere la libreria di contesto locale a una pagina web, devi prima creare un'istanza LocalContextMapView e impostare le proprietà desiderate:

  • element: l'elemento div in cui deve essere visualizzata la mappa (in questo caso è denominato "mappa").
  • placeTypePreferences - tipi di luoghi che la Raccolta di contesto locale dovrebbe restituire (fino a 10).
  • maxPlaceCount: il numero massimo di luoghi da visualizzare (1-24).
  • locationRestriction (facoltativo): limita la ricerca del luogo a una località specifica. Utilizza per impostazione predefinita l'area visibile della mappa.

Una volta creata un'istanza LocalContextMapView, puoi impostare le Opzioni mappa sull'istanza Map interna. La mappa contenuta in LocalContextMapView supporta tutte le stesse opzioni di mappa di una Maps JavaScript standard di Maps. L'esempio seguente mostra la creazione di una nuova istanza LocalContextMapView e l'impostazione di alcune opzioni sul valore Map interno:

TypeScript

let map: google.maps.Map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map!;

  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map;
  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

window.initMap = initMap;
index.js

Posticipare il caricamento dei dati sul contesto locale

Puoi posticipare il caricamento dei dati sul contesto locale al momento dell'inizializzazione, impostando l'opzione LocalContextMapView maxPlaceCount su 0. Questo si verifica in situazioni in cui vuoi attendere che gli utenti siano pronti a visualizzare i dati. Quando è tutto pronto per caricare i dati sul contesto locale, imposta maxPlaceCount su un valore pari o superiore a 1. L'esempio seguente mostra come inizializzare la mappa senza caricare i dati di contesto locali e poi impostare maxPlaceCount per caricare i dati:

// Initialize without Local Context data.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 0, // Avoids an automatic call to load places during initialization.
  });

//...

// Show places now.
localContextMapView.maxPlaceCount = 12;

Attiva/disattiva la visualizzazione dell'UI del contesto locale

Puoi attivare/disattivare gli elementi dell'interfaccia utente del contesto locale impostando l'opzione LocalContextMapView maxPlaceCount su 0. Per visualizzare di nuovo l'interfaccia utente del contesto locale, imposta maxPlaceCount su un valore pari o superiore a 1.

Impostazione delle dimensioni minime della mappa

La libreria di contesto locale cambia in modo adattabile la visualizzazione in base alle dimensioni visualizzate di LocalContextMapView. Le dimensioni minime supportate per LocalContextMapView sono:

  • 300 pixel x 480 pixel (verticale)
  • 480 x 380 pixel (orizzontale)

Quando l'elemento contenitore di LocalContextMapView scende al di sotto delle dimensioni minime supportate, gli elementi della libreria di contesto locale, inclusi il selettore di luoghi e i punti di interesse, non sono visibili. Il livello di zoom del browser influisce sulle dimensioni minime supportate; ad esempio, se la finestra del browser viene ingrandita al 200%, le dimensioni minime supportate sono 600 x 960 (verticale) e 960 x 760 (orizzontale).

Consigli CSS

Le classi CSS nel DOM della libreria di contesto locale non fanno parte dell'API pubblica e non è supportato lo stile, la modifica o la selezione di elementi nel DOM della libreria di contesto locale. Consigliamo vivamente le seguenti linee guida per evitare conflitti di stile DOM e garantire che la visualizzazione della mappa della libreria di contesto locale venga visualizzata correttamente:

  • Non utilizzare le classi CSS della libreria di contesto locale, poiché potrebbero cambiare senza preavviso.
  • Non applicare uno stile, modificare o selezionare elementi all'interno del DOM della libreria di contesto locale.

Se utilizzi un framework CSS che apporta tali modifiche, potresti essere in grado di aggirare i conflitti di stile.

Ad esempio, se vuoi modificare la pagina complessiva box-sizing in border-box:

  • Utilizza box-sizing override che impostano l'elemento <html> su border-box.
  • Utilizza box-sizing: initial per l'elemento contenente la visualizzazione mappa della Libreria contesto locale.
  • Utilizza box-sizing: inherit per tutti gli altri elementi.

Ciò garantisce che il DOM della libreria di contesto locale abbia box-sizingripristinato ai valori predefiniti standard con un selettore a bassa specificità.

Ecco come si presenta nel codice:

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

.container-for-google-maps {
  box-sizing: initial;
}