Comenzar

En esta página, se muestra cómo obtener una clave de API, habilitar las APIs necesarias y cargar la biblioteca de Places para que puedas trabajar con la clase Place.

Obtén una clave de API y habilita las APIs necesarias

Antes de usar la clase Place, debes hacer lo siguiente:

  • Crea un proyecto de Cloud con una cuenta de facturación.
  • Obtén una clave de API.
  • Habilita las siguientes APIs:
    • API de Maps JavaScript
    • API de Places
    • API de Places (versión nueva, requerida para poder usar Text Search [nueva])
  • Para obtener más información, consulta Configura tu proyecto de Google Cloud.

    Obtener una clave de API

    Habilitar la API de Places (versión nueva)

    Carga la biblioteca de Places

    Para cargar la biblioteca 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 muestra a continuación:

      const {Place} = await google.maps.importLibrary("places");
      

    Próximos pasos