Elementy informacji o miejscu

Wybierz platformę: Android iOS JavaScript

Element Informacje o miejscu i Element Informacje o miejscu w wersji kompaktowej to elementy HTML, które wyświetlają szczegółowe informacje o miejscu:

Element Informacje o miejscu

Kliknij znacznik na mapie, aby wyświetlić szczegóły miejsca w elemencie szczegółów miejsca.

PlaceDetailsElement obsługuje szeroki zakres elementów treści, w tym pełne godziny otwarcia, witrynę, numer telefonu, podsumowanie redakcyjne, wyróżnienia dotyczące konkretnego typu, opinie, kod plus i listy funkcji.

Aby wyświetlić informacje o miejscu na mapie, dodaj element gmp-place-details do elementu gmp-map na stronie HTML. Aby wybrać miejsce, dodaj element podrzędny gmp-place-details-place-request. Może to być obiekt miejsca, identyfikator miejsca lub nazwa zasobu miejsca w formacie „places/{place_id}”: 

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
    <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>
index.html
 
<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Konfigurowanie treści

Możesz kontrolować konkretne treści o miejscu wyświetlane przez element gmp-place-details, używając zagnieżdżonego elementu gmp-place-content-config, aby wybrać i skonfigurować szczegóły miejsca, jak pokazano w tym przykładzie: 

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-content-config>
        <gmp-place-address></gmp-place-address>
        <gmp-place-rating></gmp-place-rating>
        <gmp-place-type></gmp-place-type>
        <gmp-place-price></gmp-place-price>
        <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
        <gmp-place-opening-hours></gmp-place-opening-hours>
        <gmp-place-website></gmp-place-website>
        <gmp-place-phone-number></gmp-place-phone-number>
        <gmp-place-summary></gmp-place-summary>
        <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
        <gmp-place-reviews></gmp-place-reviews>
        <gmp-place-feature-list></gmp-place-feature-list>
        <gmp-place-media
          lightbox-preferred
          ></gmp-place-media>
          <gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
      </gmp-place-content-config>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Sam element gmp-place-content-config zawiera kilka elementów podrzędnych, a każdy z nich wybiera odpowiednie szczegóły miejsca do wyświetlenia: PlaceAddressElement wybiera adres miejsca, PlacePriceElement wybiera poziom cen miejsca itp. Kolejność elementów podrzędnych nie ma znaczenia, ponieważ wybrane szczegóły są zawsze renderowane w ustalonej kolejności.

Niektóre z tych elementów można dodatkowo skonfigurować za pomocą atrybutów związanych z treścią:

  • Element gmp-place-media służy do wyświetlania pojedynczego zdjęcia i zawiera atrybut lightbox-preferred, który po kliknięciu otwiera zdjęcie w lightboxie. Lightbox jest domyślnie wyłączony.
  • Element gmp-place-attribution służy do wyświetlania źródła zdjęcia. Atrybuty light-scheme-color i dark-scheme-color służą do ustawiania koloru tekstu atrybucji w trybie jasnym i ciemnym.
Więcej informacji o wszystkich obsługiwanych elementach treści znajdziesz w dokumentacji referencyjnej PlaceContentConfigElement.

Dla uproszczenia element gmp-place-content-config można zastąpić elementem gmp-place-all-content , aby wyświetlić wszystkie szczegóły dostępne w elemencie Szczegóły miejsca, lub elementem gmp-place-standard-content, aby wyświetlić standardową konfigurację.

Konfigurowanie wyglądu

Zalecany zakres szerokości elementu gmp-place-details to 250–400 pikseli. Szerokości mniejsze niż 250 pikseli mogą nie wyświetlać się prawidłowo. Ustaw wysokość odpowiednią dla Twojej aplikacji. Element Szczegóły miejsca jest zaprojektowany tak, aby w razie potrzeby można było go przewijać w przydzielonym obszarze.

Element gmp-place-details obsługuje też różne niestandardowe właściwości CSS, które umożliwiają konfigurowanie kolorów i czcionek elementu. Więcej informacji znajdziesz w artykule Places UI Kit Custom Styling.

Zobacz pełny przykład kodu

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
const marker = document.querySelector('gmp-advanced-marker');
let center = { lat: 47.759737, lng: -122.250632 };
async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary("maps");
    await google.maps.importLibrary("marker");
    await google.maps.importLibrary("places");
    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });
    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place && placeDetails.place.location) {
            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
            map.innerMap.panTo(adjustedCenter);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
            marker.style.display = 'block';
        }
    };
    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', (event) => {
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        marker.position = null;
        event.stop();
        if (event.placeId) {
            // Fire when the user clicks a POI.
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        }
        else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
            marker.style.display = 'none';
        }
    });
}
// Helper function to offset marker placement for better visual appearance.
function offsetLatLngRight(latLng, longitudeOffset) {
    const newLng = latLng.lng() + longitudeOffset;
    return new google.maps.LatLng(latLng.lat(), newLng);
}
initMap();
index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center the content horizontally */
    align-items: flex-start; /* Align items to the top */
    width: 100%
}

h1 {
  font-size: 16px;
  text-align: center;
}

gmp-map {
  height: 500px;
}

gmp-place-details {
  border-radius: 0px;
  margin: 20px;
  width: 400px;
  height: 500px;
  margin-top: 0px;
}

gmp-advanced-marker {
    display: none;
}

.widget-container {
  min-width: 400px;
  overflow-y: none;
  overflow-x: none;
}
style.css

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Click on the map to view place details</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
        <gmp-advanced-marker></gmp-advanced-marker>
    </gmp-map>
    <div class="widget-container" slot="control-inline-start-block-start">
      <gmp-place-details>
        <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content> 
      </gmp-place-details>
    </div>
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>
index.html

Kompaktowy element Informacje o miejscu

Kliknij znacznik na mapie, aby wyświetlić szczegóły miejsca w kompaktowym elemencie szczegółów miejsca.

Element PlaceDetailsCompactElement wyświetla szczegóły wybranego miejsca, zajmując minimalną ilość miejsca. Może to być przydatne w okienku informacyjnym wyróżniającym miejsce na mapie, w usługach społecznościowych, np. podczas udostępniania lokalizacji na czacie, jako sugestia wyboru bieżącej lokalizacji lub w artykule w mediach, aby odwołać się do miejsca w Mapach Google. PlaceDetailsCompactElement może wyświetlać nazwę, adres, ocenę, typ, cenę, ikonę dostępności, stan otwarcia i jedno zdjęcie. Może być wyświetlany poziomo lub pionowo, w zależności od wybranego atrybutu orientation.

W poniższym fragmencie kodu element gmp-place-details-compact jest zagnieżdżony w elemencie gmp-map, a atrybut orientation ma wartość horizontal. Dodatkowy atrybut truncation-preferred powoduje obcięcie niektórych treści, aby zmieściły się w jednym wierszu zamiast przenosić się do nowego wiersza. Element gmp-place-details-compact zawiera element podrzędny gmp-place-details-place-request, który służy do wyboru miejsca. Może to być obiekt miejsca, identyfikator miejsca lub nazwa zasobu miejsca w formacie „places/{place_id}”: 

<gmp-map center="47.75972, -122.25094" zoom="19" map-id="DEMO_MAP_ID">
  <gmp-place-details-compact orientation = "horizontal" truncation-preferred slot="control-block-start-inline-center" >
    <gmp-place-details-place-request place = "ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-content-config>
        <gmp-place-media lightbox-preferred></gmp-place-media>
        <gmp-place-rating></gmp-place-rating>
        <gmp-place-type></gmp-place-type>
        <gmp-place-price></gmp-place-price>
        <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
        <gmp-place-open-now-status></gmp-place-open-now-status>
        <gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
    </gmp-place-content-config>
  </gmp-place-details-compact>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Konfigurowanie treści

Możesz kontrolować konkretne treści miejsca wyświetlane przez element gmp-place-details-compact, używając zagnieżdżonego elementu gmp-place-content-config do wybierania i konfigurowania szczegółów miejsca. Sam element gmp-place-content-config zawiera kilka elementów podrzędnych z treścią, a każdy z nich wybiera odpowiednie szczegóły miejsca do wyświetlenia. Kolejność elementów podrzędnych nie ma znaczenia, ponieważ wybrane szczegóły są zawsze renderowane w ustalonej kolejności. Niektóre z tych elementów można dodatkowo skonfigurować za pomocą atrybutów związanych z treścią.

Więcej informacji o wszystkich obsługiwanych elementach treści znajdziesz w dokumentacji referencyjnej PlaceContentConfigElement.

Dla uproszczenia element gmp-place-content-config można zastąpić elementem gmp-place-all-content , aby wyświetlić wszystkie szczegóły dostępne w kompaktowym elemencie szczegółów miejsca, lub elementem gmp-place-standard-content, aby wyświetlić standardową konfigurację.

Konfigurowanie wyglądu

Zalecany zakres szerokości elementu gmp-place-details-compact w orientacji pionowej to 180–300 pikseli. Szerokości mniejsze niż 160 pikseli mogą nie wyświetlać się prawidłowo. Nie ustawiaj stałej wysokości.

Zalecany zakres szerokości elementu gmp-place-details-compact w orientacji poziomej to 180–500 pikseli. Szerokości mniejsze niż 160 pikseli mogą nie wyświetlać się prawidłowo. Przy szerokości mniejszej niż 350 pikseli miniatura nie będzie wyświetlana. Nie ustawiaj stałej wysokości.

Element gmp-place-details-compact obsługuje też różne niestandardowe właściwości CSS, które umożliwiają konfigurowanie kolorów i czcionek elementu. Więcej informacji znajdziesz w artykule Places UI Kit Custom Styling.

Zobacz pełny przykład kodu

Ten przykład pokazuje, jak programowo dodać PlaceDetailsCompactElement do mapy za pomocą AdvancedMarkerElement.

JavaScript

// Use querySelector to select elements for interaction.
const mapContainer = document.getElementById("map-container");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeDetailsRequest = document.querySelector("gmp-place-details-place-request");
let gMap;
let marker;
async function initMap() {
    const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places");
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
    marker = new AdvancedMarkerElement({ map: gMap });
    // Hide the map type control.
    gMap.setOptions({ mapTypeControl: false });
    // Set up map, marker, and infowindow once widget is loaded.
    placeDetails.style.visibility = 'visible';
    placeDetails.addEventListener('gmp-load', (event) => {
        console.log("placeDetails initialized!");
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    gMap.addListener("click", async (event) => {
        event.stop();
        // Fire when the user clicks on a POI.
        if (event.placeId) {
            console.log("clicked on POI");
            console.log(event.placeId);
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        }
        else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
        }
        ;
    });
    // Function to update map, marker, and infowindow based on place details
    const updateMapAndMarker = () => {
        console.log("function called");
        if (placeDetails.place && placeDetails.place.location) {
            marker.gMap = null;
            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, 0.002);
            gMap.panTo(adjustedCenter);
            gMap.setZoom(16); // Set zoom after panning if needed
            marker.content = placeDetails;
            marker.position = placeDetails.place.location;
        }
        else {
            console.log("else");
        }
    };
}
// Helper function to offset marker placement for better visual appearance.
function offsetLatLngRight(latLng, latitudeOffset) {
    const newLat = latLng.lat() + latitudeOffset;
    return new google.maps.LatLng(newLat, latLng.lng());
}
initMap();
index.js

CSS

html,
body {
  display: flex;
  width: 100%;
  height: 400px;
  margin: 0;
}

h1 {
  font-size: 16px;
  text-align: center;
}

#map-container {
    box-sizing: border-box;
    width: 100%;
}
gmp-place-details-compact {
  /* Sets the color for text and icons on the surface */
  /* Adapts automatically to the user's system light/dark mode preference */
  --gmp-mat-color-on-surface: light-dark(black, white);
  /* Sets the background color of the surface */
  /* Adapts automatically to the user's system light/dark mode preference */
  --gmp-mat-color-surface: light-dark(white, black);
  /* Defines the primary font stack used within the component */
  --gmp-mat-font-family: Google Sans Text, sans-serif;
  /* Defines the style for medium body text (e.g., address, descriptions) */
  --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');

  width: 360px;
  border: none;
  padding: 0;
  margin: 0;
  position: relative;
  transform: translate(0, calc(-20px));
}

/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}

style.css

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Click on the map to view place details</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id = "map-container"></div>
    <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact>
    <script>
        (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
        key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
        v: "weekly"
        });
    </script>  
  </body>
</html>
index.html