Начните работу с комплектом пользовательского интерфейса Places

Выберите платформу: Android iOS JavaScript

На этой странице показано, как получить ключ API, включить Places UI Kit и загрузить библиотеки, которые его поддерживают.

Получите ключ API и активируйте Places UI Kit.

Перед использованием Places UI Kit вам необходимо:

  • Создайте облачный проект с платёжным учётным записью.
  • Включите набор элементов пользовательского интерфейса «Места».
  • Получите ключ API.

Для получения более подробной информации см. раздел «Настройка проекта Google Cloud» .

Включить набор элементов пользовательского интерфейса "Места"

Получить ключ API

Загрузите необходимые библиотеки.

Чтобы загрузить библиотеки, поддерживающие Places UI Kit, сначала загрузите JavaScript API карт, добавив встроенный загрузчик Bootstrap в код вашего приложения, как показано в следующем фрагменте кода:

  <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>

Далее, используя оператор await , вызовите importLibrary() из async функции следующим образом:

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

Узнайте больше о загрузке JavaScript API карт .

Следующие шаги

,
Выберите платформу: Android iOS JavaScript

На этой странице показано, как получить ключ API, включить Places UI Kit и загрузить библиотеки, которые его поддерживают.

Получите ключ API и активируйте Places UI Kit.

Перед использованием Places UI Kit вам необходимо:

  • Создайте облачный проект с платёжным учётным записью.
  • Включите набор элементов пользовательского интерфейса «Места».
  • Получите ключ API.

Для получения более подробной информации см. раздел «Настройка проекта Google Cloud» .

Включить набор элементов пользовательского интерфейса "Места"

Получить ключ API

Загрузите необходимые библиотеки.

Чтобы загрузить библиотеки, поддерживающие Places UI Kit, сначала загрузите JavaScript API карт, добавив встроенный загрузчик Bootstrap в код вашего приложения, как показано в следующем фрагменте кода:

  <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>

Далее, используя оператор await , вызовите importLibrary() из async функции следующим образом:

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

Узнайте больше о загрузке JavaScript API карт .

Следующие шаги