Comienza a usar el kit de IU de Places

En esta página, se muestra cómo obtener una clave de API, habilitar el kit de IU de Places y cargar las bibliotecas que lo admiten.

Obtén una clave de API y habilita el kit de IU de Places

Antes de usar el kit de IU de Places, debes hacer lo siguiente:

  • Crea un proyecto de Cloud con una cuenta de facturación.
  • Habilita el kit de IU de Places.
  • Obtén una clave de API.

Para obtener más información, consulta Configura tu proyecto de Google Cloud.

Habilita el kit de IU de Places

Obtén una clave de API.

Carga las bibliotecas requeridas

Para cargar las bibliotecas que admiten el kit de IU de Places, primero carga la API de Maps JavaScript. Para ello, agrega el cargador de arranque intercalado al código de tu aplicación, como se muestra en el siguiente fragmento: 

  <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: "weekly",
      // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
      // Add other bootstrap parameters as needed, using camel case.
    });
  </script>

Luego, usa el operador await para llamar a importLibrary() desde una función async, como se indica a continuación:

  // Import the Places Library for PlaceDetailsElement and PlaceSearchElement
  const {PlaceDetailsElement, PlaceSearchElement} = await google.maps.importLibrary('places');

  // Import the Elevation Library for ElevationElement
  const {ElevationElement} = await google.maps.importLibrary('elevation');

Obtén más información para cargar la API de Maps JavaScript.

Próximos pasos