Elemento Place Details

Elemento de detalles del lugar de tamaño mediano superpuesto en un mapa de Google

PlaceDetailsElement es un elemento HTML que renderiza los detalles de un lugar. Existen dos métodos para configurar el elemento gmp-place-details:

  • El método configureFromPlace renderiza el elemento Place Details según un ID de lugar o un objeto Place.
  • El método configureFromLocation renderiza el elemento Place Details en función de las coordenadas de latitud y longitud.

En el ejemplo de esta página, se renderiza el elemento Place Details cuando el usuario hace clic en el mapa. Para agregar detalles de lugares a un mapa, agrega un elemento gmp-place-details a la página HTML. Establece su tamaño y posición con los atributos size y slot, respectivamente. En el siguiente ejemplo, está anidado dentro de un elemento gmp-map con size establecido en medium y slot establecido en control-inline-start-block-start. 

<gmp-map center="-37.813,144.963" zoom="2" map-id="DEMO_MAP_ID">
  <gmp-place-details
    size="medium"
    slot="control-inline-start-block-start"></gmp-place-details>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Se usa un querySelector para seleccionar cada elemento de la página para la interacción:

const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const marker = document.querySelector('gmp-advanced-marker');

El controlador de eventos en el siguiente fragmento renderiza el elemento Place Details según la ubicación del clic del usuario en el mapa:

// Add an event listener to handle map clicks.
map.innerMap.addListener('click', async (event) => {
  marker.position = null;
  event.stop();
  if (event.placeId) {
    // The user clicked a point on the map that has a Place ID (for example a
    // POI).
    await placeDetails.configureFromPlace({id: event.placeId});
  } else {
    // The user clicked an area of the map with no Place ID.
    await placeDetails.configureFromLocation(event.latLng);
  }
  // Show the marker at the selected place.
  marker.position = placeDetails.place.location;
  marker.style.display = 'block';
});

Consulta el ejemplo de código completo

JavaScript

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const marker = document.querySelector('gmp-advanced-marker');

async function init() {
  // Import the needed libraries.
  await google.maps.importLibrary('places');
  await google.maps.importLibrary('marker');

  // Calls the geolocation helper function to center the map on the current
  // device location.
  findCurrentLocation();

  // Hide the map type control.
  map.innerMap.setOptions({mapTypeControl: false});

  // Add an event listener to handle map clicks.
  map.innerMap.addListener('click', async (event) => {
    marker.position = null;
    event.stop();
    if (event.placeId) {
      // Fire when the user clicks a POI.
      await placeDetails.configureFromPlace({id: event.placeId});
    } else {
      // Fire when the user clicks the map (not on a POI).
      await placeDetails.configureFromLocation(event.latLng);
    }
    // Show the marker at the selected place.
    marker.position = placeDetails.place.location;
    marker.style.display = 'block';
  });
}

// Helper function for geolocation.
async function findCurrentLocation() {
  const {LatLng} = await google.maps.importLibrary('core');
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos =
              new LatLng(position.coords.latitude, position.coords.longitude);
          map.innerMap.panTo(pos);
          map.innerMap.setZoom(16);
        },
        () => {
          console.log('The Geolocation service failed.');
          map.innerMap.setZoom(16);
        },
    );
  } else {
    console.log('Your browser doesn\'t support geolocation');
    map.innerMap.setZoom(16);
  }
}

init();

CSS

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
}

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

gmp-map {
  box-sizing: border-box;
  padding: 0 20px 20px;
  width: 100%;
}

gmp-place-details {
  background-color: #fff;
  border-radius: 8px;
  margin: 20px;
  width: 400px;
}


gmp-advanced-marker {
    display: none;
}

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">
  </head>
  <body>
    <h1>Click on the map to view place details</h1>
    <gmp-map center="-37.813,144.963" zoom="2" map-id="DEMO_MAP_ID">
      <gmp-place-details
        size="large"
        slot="control-inline-start-block-start"></gmp-place-details>
      <gmp-advanced-marker></gmp-advanced-marker>
    </gmp-map>
    <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: "YOUR_API_KEY",
        v: "alpha"
      });
    </script>
  </body>
</html>