Главная » Google

Api карт Google примеры

Содержание

Посмотрите тепловую карту доступности воды в дельте Нила, основанную на данных Google Cloud BigQuery, экспортированных из Google Earth Engine.

Развернуть
Sorry, your browser doesn’t support embedded videos.
Основные сервисы
Используйте Deck.gl для визуализации данных

Deck.gl – фреймворк с открытым кодом для визуализации данных в веб-интерфейсе. С его помощью легко создавать 2D- и 3D-визуализации больших наборов геоданных. Инструмент позволяет совмещать слои, чтобы анализировать сложные данные в контексте реальной ситуации и получать полезные сведения.

Развернуть
Sorry, your browser doesn’t support embedded videos.
Основные сервисы
Динамические карты Directions Geocoding
Демоверсия приложения для путешествий

Путешествуйте по всему миру с помощью этой демоверсии на основе WebGL.

WebGL выводит работу с картами на новый уровень. Посмотрите, как может выглядеть мир, когда вы управляете отображением данных на трехмерной карте.

Развернуть
Sorry, your browser doesn’t support embedded videos.
Основные сервисы
Динамические карты Place Details Directions
Настройка карт

Возможности Google Maps API для бизнеса

Попробуйте работать с новой настройкой карт в облаке.

Вы можете создавать собственные стили карт прямо в веб-интерфейсе. Настройка стилей в облаке позволяет легко модифицировать карту с учетом потребностей отрасли или отдельного клиента. Попробуйте – и вы увидите, как быстро можно создавать карты и обновлять их одновременно на всех платформах и устройствах.

Развернуть
Sorry, your browser doesn’t support embedded videos.
Основные сервисы
Функции на основе WebGL
Ознакомьтесь с обновлениями карт на базе WebGL и Dynamic Maps API.

  • Наклоны и вращение. Управляйте картой в трех измерениях, изменяйте объекты и помещайте их позади других.
  • Интегрированное управление камерой. Изменяйте все параметры одновременно и добавляйте собственную анимацию.
  • Оверлеи WebGL. Добавляйте 2D- и 3D-объекты прямо на базовую карту.

Развернуть
Sorry, your browser doesn’t support embedded videos.
Основные сервисы
Delivery Tycoon
Сразитесь с платформой Google Карт в игре Delivery Tycoon

Вам нужно строить маршруты вручную. Сможете ли вы предложить вариант, который окажется лучше, чем оптимизированный маршрут платформы Google Карт?

Развернуть
Sorry, your browser doesn’t support embedded videos.
Основные сервисы
Динамические карты Roads Directions Place Details
Загляните на другую сторону земного шара с помощью приложения дополненной реальности Floom и Карт

Floom uses your location, and creates a tunnel to the other side of the globe — right in your browser. It was built by Google Creative Lab using the WebXR API and Dynamic Maps API.

Note: Floom is currently only available using Chrome on Android devices.

Развернуть
Sorry, your browser doesn’t support embedded videos.
Основные сервисы
iNaturalist
Присоединяйтесь к 4 млн пользователей, которые делятся наблюдениями за окружающим миром.

Проект iNaturalist создан Калифорнийской академией наук и Национальным географическим обществом. Его цель – сбор данных о биоразнообразии жизни на Земле. На настоящий момент зафиксировано 75 000 000 наблюдений. В облаке сохраняются не только фотографии живых существ, но и информация о месте и времени съемки.

Google Maps API: Создание карты, маркеров…

Развернуть
Sorry, your browser doesn’t support embedded videos.
Основные сервисы
Динамические карты Autocomplete Place Details Geocoding
Умные города

Узнайте, как создавать цифровые версии городов с помощью WebGL Google Maps API с функциями 3D.

Компания UbiLabs создала цифровую демоверсию Гамбурга, чтобы показать, как можно использовать цифровые версии для анализа и проверки сценариев, прежде чем тестировать их в реальном мире.

Развернуть
Sorry, your browser doesn’t support embedded videos.
Основные сервисы
3D Driving Simulator
Передвигайтесь по Google Картам на автомобиле в 3D-режиме.

Промчитесь по улицам Парижа, осмотрите окрестности или прокатитесь по пустыне в трех измерениях на Google Картах. Вы можете использовать эту функцию с компьютера, планшета или телефона и путешествовать по любым дорогам в разных частях мира.

Развернуть
Sorry, your browser doesn’t support embedded videos.
Основные сервисы
WebGL and CARTO
Explore a sample data visualization story that showcases the possibilities of custom maps.

Google Maps Platform and CARTO have collaborated to bring rich data visualization to web maps. This example uses multiple methods of visualization to tell the story of the potential electrification of truck fleets.

Развернуть
Sorry, your browser doesn’t support embedded videos.

Облачные решения для стилей карт WebGL overlay view for javascript Векторные карты Tilt and rotation Move Camera API

Data-driven styling
Style boundaries with or without your business data.

Check out a variety of use cases enabled by data-driven styling. It allows you to easily display, and style Google’s polygons for administrative boundaries, or add your business data to create choropleth maps.

Развернуть
Sorry, your browser doesn’t support embedded videos.
Основные сервисы
Interactive city tour
Explore two unique cities and learn how to build your own custom maps.

Take a grand tour through Barcelona and retro Tokyo to explore historical landmarks and unearth hidden mementos. See how Google Maps Platform products can help you build unique, interactive geospatial experiences.

Развернуть
Sorry, your browser doesn’t support embedded videos.
Динамические карты Routes Динамический Просмотр улиц
Advanced Markers
Easily create custom interactive markers.

In this demo see how you can customize the Google Maps red pin and create custom markers with SVGs, PNGs or HTML elements—all directly in your code.

Развернуть
Sorry, your browser doesn’t support embedded videos.
Advanced Markers Оверлеи WebGL Tilt Rotation Marker Collision Management
Получайте уведомления об экологических инцидентах.

Если происходит загрязнение окружающей среды, SkyTruth отслеживает этот инцидент, регистрирует событие и публикует информацию о нем с помощью различных карт. Любой пользователь может подписаться на уведомления о таких инцидентах в интересующем его местоположении и отслеживать эту информацию на карте в реальном времени.

Источник: mapsplatform.google.com

Google Maps API

Картографический сервис – зачем это? Ну например, я 10 лет жил в нашей маленькой провинции, а потом взял и понаехал в Москву, и всё для меня так ново. А где магазины, боулинг, кафешки, парки отдыха – надо знать же, где тратить московскую зарплату. Но вот беда, как узнать? Раньше был справочник «Желтые страницы» и там была карта и всё по адресам.

Чтобы найти что-то уходило масса времени. Сейчас стало всё в разы проще. Вот прекрасный пример: http://www.pushkino.org/. Но это далеко не всё.
Я могу отслеживать погоду, пожары, пробки (кстати!) в реальном времени.
Мой заказчик может не вводить свой адрес, а попросту отметить его на карте и я буду знать куда доставить ему товар – какое классное решение, не надо всего этого – «Проспект маршала Блюхера, 43, г. Санкт-Петербург, Россия».

Задача для примера

  1. Вывести карту (надо же!)
  2. Задать город
  3. Переместить карту к городу
  4. Маркером указать адрес
  5. Добавить информации
  6. Вывести карту (надо же!)
  7. Сохранить маркер с иноформацией (при клике на него вывести ее)
  8. Избежать нагромождения (т.е. сделать кластеризацию) маркеров.

Как делать?

Ключ API

Ключ API нужен для использования работы с картой, т.е. при запросе всех их скриптов и сервисов в параметры нужно добавлять var myLatlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = < zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP >var map = new google.maps.Map(document.getElementById(«map_canvas»), myOptions); >

center: myLatlng – это координаты центра карты
zoom – это увеличение при инициализации
mapTypeId – тип (политическая, физическая, гибрид)
Карта готова!

Второе — это метки:

var marker = new google.maps.Marker(< position: myLatlng, map: map, title:»Hello World!» >);

position – собственно координаты метки
map – на какую карту метку поместить
title – при наведении мыши будет писать “Hello World!”.

InfoWindow

var contentString = ‘Тут всё то про что должно быть рассказано’; var infowindow = new google.maps.InfoWindow(< content: contentString >); var marker = new google.maps.Marker(< position: myLatlng, map: map, title: ‘Uluru (Ayers Rock)’ >); google.maps.event.addListener(marker, ‘click’, function() < infowindow.open(map,marker); >);

content – содержимое в метке

google.maps.event.addListener(marker, ‘click’, function() < infowindow.open(map,marker); >);

— при клике на метку, показать окно с информацией, на карте map с привязкой к marker.

Geocoding
  • По наименованию чего-то, найти это на карте и сообщить координаты
  • По координатам, сообщить всё что находится на этих координатах.

И в ответе приходит:

< «status»: «OK», «results»: [ < «types»: [ «locality», «political» ], «formatted_address»: «город Иваново, Ивановская область, Россия», — полный адрес «address_components»: [ < — составляющие адреса «long_name»: «город Иваново», «short_name»: «город Иваново», «types»: [ «locality», «political» ] >, < «long_name»: «Ивановский район», «short_name»: «Ивановский район», «types»: [ «administrative_area_level_2», «political» ] >, < «long_name»: «Ивановская область», «short_name»: «Ивановская область», «types»: [ «administrative_area_level_1», «political» ] >, < «long_name»: «Россия», «short_name»: «RU», «types»: [ «country», «political» ] >], «geometry»: < «location»: < — местонахождение «lat»: 56.9924086, «lng»: 40.9677888 >, «location_type»: «APPROXIMATE», «viewport»: < — размеры «southwest»: < «lat»: 56.9699256, «lng»: 40.9265167 >, «northeast»: < «lat»: 57.0148916, «lng»: 41.0090609 >>, «bounds»: < — границы «southwest»: < «lat»: 56.9699256, «lng»: 40.9265167 >, «northeast»: < «lat»: 57.0148916, «lng»: 41.0090609 >> > > ] >

Вся прелесть в том, что можно в address параметре передавать значение на любом языке(Ivanovo, Іваново, ), еще лучше, что для Санкт-Петербурга прокатывает «Спб» и «Питер». Правда есть и недочеты: мой родной город Ивано-Франковск упорно называет Ивано-Франковськ, на украинский манер.
Вторая возможность, это по координатам узнать адрес:

< «status»: «OK», «results»: [ < «types»: [ «street_address» ], «formatted_address»: «Красная пл., 3, город Москва, Россия, 109012», «address_components»: [ < «long_name»: «3», «short_name»: «3», «types»: [ «street_address» ] >, < «long_name»: «Красная пл.», «short_name»: «Красная пл.», «types»: [ «route» ] >, < «long_name»: «Тверской», «short_name»: «Тверской», «types»: [ «sublocality», «political» ] >, < «long_name»: «город Москва», «short_name»: «город Москва», «types»: [ «locality», «political» ] >, < «long_name»: «АО Центральный», «short_name»: «АО Центральный», «types»: [ «administrative_area_level_2», «political» ] >, < «long_name»: «Москва», «short_name»: «Москва», «types»: [ «administrative_area_level_1», «political» ] >, < «long_name»: «Россия», «short_name»: «RU», «types»: [ «country», «political» ] >, < «long_name»: «109012», «short_name»: «109012», «types»: [ «postal_code» ] >], «geometry»: < «location»: < «lat»: 55.7546971, «lng»: 37.6215214 >, «location_type»: «ROOFTOP», «viewport»: < «southwest»: < «lat»: 55.7515495, «lng»: 37.6183738 >, «northeast»: < «lat»: 55.7578447, «lng»: 37.6246690 >> > >, < .

Супер! Для того чтобы указать свой адрес, можно просто кликнуть на свой дом, добавить квартиру – и всё. Иногда это не срабатывает, например, если дома стоят вплотную друг к другу и считываются как 1 объект, а не 2-3, адрес у них будет один. Особенно плохо, когда они находятся на пересечении улиц, и один дом относится к одной улице, а второй – к перпендикулярной, но думаю по необходимости – можно указать улицу, а дом и квартиру уже вбить. Очень удобное для смартфонов решение.
Кстати, не используйте jquery $.getJSON для получения данных, используйте класс Geocoder (http://code.google.com/apis/maps/documentation/javascript/reference.html#Geocoder), он работает лучше (т.е. это означает что getJSON у меня не работает).

А теперь о не очень хорошем. Geocoder – насколько клевая функция, что пользоваться ею можно только 2500 запросов в день. Google предлагает Google API Key Premier от 10000$ в год, и тогда ограничение будет в 100 тыс. запросов в день, причем куча всяких «клевых» дополнений, но я их не могу себе позволить.

Markercluster

Когда слишком много маркеров — это выглядит конечно ужасно. Поэтому хорошо бы делать кластеризацию всех этих маркеров. Тут на Хабре я видел уже обсуждение по этому поводу: http://habrahabr.ru/blogs/google/28621/
В общем, есть отличный инструмент (а тут их целый набор http://code.google.com/apis/maps/articles/toomanymarkers.html) который помогает сделать так, чтобы толпы маркеров не пугали нас.
До:

После:

Это именно то что нам надо.
Эту библиотеку можно скачать тут: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/
Как использовать.
Добавляем библиотеку

Составляем массив маркеров, не добавляя в карту:

var markers = []; var marker = new google.maps.Marker(< position: latlng >); markers.push(marker); markerClusterer = new MarkerClusterer(_this.map, markers, < maxZoom: 13, gridSize: 50, styles: null >);

maxZoom – максимальный зум при котором мы еще группируем маркеры, дальше – уже нет.
gridSize – размер ячеек сетки, чем меньше значение, тем меньше сетка группировки
styles – дополнительные стили

Код из примера
  • собственно страница
  • получить все маркеры (в json)
  • загрузить файл (через ajaxUploader) и получить ссылку для картинки
  • сохранить в базу данных маркер (на выходе json result = ok)

this.getZoom = function (bounds) < var width = $(«.map»).width(); var height = $(«.map»).height(); var dlat = Math.abs(bounds.getNorthEast().lat() — bounds.getSouthWest().lat()); var dlon = Math.abs(bounds.getNorthEast().lng() — bounds.getSouthWest().lng()); var max = 0; if (dlat >dlon) < max = dlat; >else < max = dlon; >var clat = Math.PI * Math.abs(bounds.getSouthWest().lat() + bounds.getNorthEast().lat()) / 360.; var C = 0.0000107288; var z0 = Math.ceil(Math.log(dlat / (C * height)) / Math.LN2); var z1 = Math.ceil(Math.log(dlon / (C * width * Math.cos(clat))) / Math.LN2); //18 – это максимальный zoom для google.maps return 18 — ((z1 > z0) ? z1 : z0); >

Функция для «прыжка» маркера:

this.toggleBounceMarker = function() < if (_this.setMarker.getAnimation() != null) < _this.setMarker.setAnimation(null); >else < _this.setMarker.setAnimation(google.maps.Animation.BOUNCE); >>
this.SetAddresses = function (results) < $(«.address_list»).show(); $(«.address_list»).empty(); var addressText = _this.ComposeAddress(results[0]); . >//Составить строку адреса по первому результату this.ComposeAddress = function (item) < retAddress = «»; $.each(item.address_components, function (i, address_item) < var isOk = false; $.each(address_item.types, function (j, typeName) < //не будем брать значения адреса улицы и локали (города) — город потом будет в administrative_level_2 if (typeName != «street_address» typeName != «locality») < isOk = true; >>); if (isOk) < if (retAddress == «») < retAddress = address_item.long_name; >else < retAddress = retAddress + «, » + address_item.long_name; >> >); return retAddress; >

Итого

Google Maps API – очень классная и удобная штука, которая легка в использовании и понимании. Единственно, что плохо – так это слабое покрытие регионов в России, так что сервисам, которые предполагается использовать в глубинке google.maps пока мало интересен, а вот для больших городов (особенно Москва и Питер), а также для Украины – всё отлично.
Geocoding – очень полезная вещь и при правильном использовании может стоить тех денег, что за нее просят (ну или Microsoft или Яндекс подоспеет с аналогом уже есть. Хотя насколько я знаю, картографическая информация стоит бешеных вложений.)

Примерисходники

На живой пример можно глянуть тут: http://cocosanka.ru/map (может перестать работать если будет достигнут лимит в Geocoding). Вводите город, потом перетаскиваете маркер, потом загружаете картинку и сохранить. При клике на маркеры выводятся картинки.

  • google maps
  • google maps api
  • asp.net mvc

Источник: habr.com

Api карт google примеры

Даже в этом простом примере следует учитывать ряд моментов:

  1. Для объявления приложения HTML5 мы используем .
  2. Для карты мы создаем элемент div под названием «map».
  3. Мы определяем функцию JavaScript, которая создает карту в элементе div .
  4. Мы загружаем Maps JavaScript API с помощью тега script .

Более подробное описание этих шагов приведено ниже.

Объявление приложения в формате HTML5

В приложении рекомендуется объявлять истинный тип DOCTYPE . В приведенных здесь примерах используется простой DOCTYPE HTML5:

Некоторые стили CSS, работающие в режиме совместимости, не работают в стандартном режиме. В частности, все размеры, выраженные в процентах, должны наследоваться от родительских элементов блоков. Если для любого из этих родительских элементов размер не указан, предполагается, что они имеют размер 0 x 0 пикселей. Вот почему мы включаем следующее объявление :

#map < height: 100%; >html, body

Это объявление CSS указывает, что контейнер карты с идентификатором map может занять до 100 % высоты тела HTML. Обратите внимание, что процентные соотношения также нужно явно объявить для и .

Загрузка Maps JavaScript API

Maps JavaScript API загружается с помощью тега script , который можно добавить в HTML-файл или динамически, с помощью отдельного файла JavaScript. Мы рекомендуем рассмотреть оба подхода и выбрать тот, который наиболее подходит для структуры кода в вашем проекте.

Встроенная загрузка

Чтобы загрузить Maps JavaScript API в HTML-файл, добавьте тег script , как показано ниже.

Динамическая загрузка

Посмотрите, как динамически загрузить встроенный JavaScript API Карт с помощью отдельного файла JavaScript, в примере ниже. Этот подход позволяет брать весь код для работы с API из отдельного файла .js (так же, как делает встроенный тег скрипта).

// Create the script tag, set the appropriate attributes var script = document.createElement(‘script’); script.src = ‘https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY script.async = true; // Attach your callback function to the `window` object window.initMap = function() < // JS API is loaded and available >; // Append the ‘script’ element to ‘head’ document.head.appendChild(script);

Динамическая загрузка

Пакет можно импортировать в приложение:

Загрузчик предоставляет объект Promise и интерфейс обратного вызова. Ниже показано использование load() (метода Promise по умолчанию).

TypeScript

Примечание. Ознакомьтесь с руководством по работе с TypeScript в Google Картах.

JavaScript

Атрибуты тега Script

Обратите внимание, что в приведенных выше примерах для тега script задано несколько рекомендуемых атрибутов. Пояснения к ним даются ниже.

  • src – URL-адрес, с которого загружается API JavaScript Карт, включая все символы и определения, необходимые для использования API. В этом примере у URL-адреса есть два параметра: key , где вы указываете свой ключ API, и callback , где вы указываете имя глобальной функции, которая будет вызываться после полной загрузки Maps JavaScript API. Подробнее о параметрах URL…
  • async – дает команду браузеру асинхронно загрузить и выполнить скрипт. Когда скрипт выполняется, он вызывает функцию, заданную с помощью параметра callback .

Библиотеки

Вместе с загрузкой Maps JavaScript API по URL можно загрузить дополнительные библиотеки, применив параметр URL libraries . Библиотеки содержат модули кода, обеспечивающие дополнительные функции Maps JavaScript API. Их загрузка производится только по специальному запросу. Подробную информацию вы найдете в разделе Библиотеки Maps JavaScript API.

Синхронная загрузка API

В теге script , который загружает Maps JavaScript API, можно опустить атрибут defer и параметр callback . В этом случае загрузка API заблокирует все другие операции до момента ее завершения.

Скорее всего, это замедлит загрузку страницы. Однако это даст вам уверенность в том, что последующие теги в сценарии будут срабатывать при загруженном API.

Важно! Обратитесь к руководству по Content Security Policy, чтобы узнать больше о настройке CSP для Maps JavaScript API.

Элементы DOM карты

Чтобы отобразить карту на веб-странице, для нее нужно зарезервировать место. Обычно для этого создается элемент div с именем, а ссылка на него включается в DOM браузера.

В примере выше мы используем CSS, чтобы установить высоту div карты на уровне 100 %. Благодаря этому размер карты будет подгоняться под размер экрана мобильных устройств. Значения ширины и высоты требуется корректировать в зависимости от размера экрана браузера и отступов. Элементы div обычно используют ширину содержащего их элемента, а пустые элементы div обычно имеют высоту 0. По этой причине вы всегда должны явно задавать высоту .

Примечание. Ограничение минимального/максимального размера для растровых карт составляет 6144 x 6144 пикселей.

Параметры карты

Два эти параметра обязательны для каждой карты: center и zoom .

map = new google.maps.Map(document.getElementById(‘map’), < center: , zoom: 8 >);

Уровни масштабирования

Начальное разрешение, используемое при отображении карты, определяется параметром zoom , причем значение 0 соответствует наименьшему масштабу. При увеличении масштаба камера приближается к карте.

zoom: 8

Чтобы карта всей Земли поместилась на одном изображении, потребуется или карта огромного размера, или небольшая карта с очень низким разрешением. Поэтому изображения в Google Maps и Maps JavaScript API разбиваются на фрагменты по уровням масштабирования. При малом увеличении фрагменты с низким разрешением покрывают большую площадь, а при сильном – фрагменты с высоким разрешением покрывают небольшую площадь. В списке ниже показан примерный уровень детализации, который можно ожидать на каждом уровне масштабирования:

  • 1: мир;
  • 5: континент;
  • 10: город;
  • 15: улицы;
  • 20: здания.

На следующих трех изображениях показано одно и то же место в Токио с уровнями масштабирования 0, 7 и 18.

Подробнее о загрузке фрагментов в зависимости от уровня масштабирования читайте в руководстве по координатам карт и фрагментов.

Объект Map

map = new google.maps.Map(document.getElementById(«map»), );

За представление карты в JavaScript отвечает класс Map . Объекты этого класса определяют только одну карту. Вы можете создать несколько экземпляров объекта, каждый из которых будет определять на странице свою карту. Это можно сделать с помощью оператора JavaScript new .

При создании нового экземпляра карты на странице HTML нужно задать элемент , который послужит контейнером. Узлы HTML представляют собой дочерние элементы объекта JavaScript document : мы получаем ссылку на них с помощью метода document.getElementById() .

В примере ниже переменная map определена и назначена новому объекту Map . Функция Map() использована в качестве конструктора.

Конструктор Описание
Map(mapDiv:Node, opts?:MapOptions ) Создает новую карту в указанном контейнере HTML (обычно DIV) с использованием любых переданных (необязательных) параметров.

Устранение неполадок

  • Все запросы Maps JavaScript API должны включать ключ API. Мы больше не поддерживаем доступ без ключа.
  • Необходимо включить функции оплаты для каждого из ваших проектов.

Ошибки, связанные с оплатой и ключом API

Иногда карты могут отображаться затемненными, а панорамы Просмотра улиц – в негативе, с водяными знаками «for development purposes only» (только для целей разработки). Чаще всего такая проблема связана с ключом API или оплатой. Сервисами платформы Google Карт можно пользоваться, только если в вашем аккаунте активированы платежные функции, а в запросах к API указан действительный ключ. Ниже приведена последовательность шагов, которая поможет вам выявить и решить проблему.

Вы используете ключ API?

Не знаю. Как проверить, использую ли я ключ API?

Ключ API передается как параметр key в URL, который используется для загрузки Maps JavaScript API. Существует несколько способов проверить, используете ли вы ключ API:

  • Воспользуйтесь расширением Chrome Google Maps Platform API Checker. С его помощью вы сможете определить, правильно ли реализованы лицензионные Maps API на вашем сайте.
  • Если вы используете библиотеку или плагин для загрузки Maps JavaScript API проверьте настройки этой библиотеки и найдите вариант с использованием ключа API.
  • Проверьте, нет ли ошибок в вашем браузере. Если вы увидите следующие сообщения, значит вы неправильно используете ключ API:
  • Предупреждение Google Maps JavaScript API: NoApiKeys
  • Ошибка Google Maps JavaScript API: MissingKeyMapError

Для веб-разработчиков:

  • Если у вас есть доступ к коду приложения, найдите тег , который используется для загрузки Maps JavaScript API. При загрузке Maps JavaScript API замените YOUR_API_KEY в указанном ниже коде ключом API.

Нет, я не использую ключ API.

Чтобы получить ключ API, нажмите кнопку ниже. Если не запустится пошаговая настройка, выполните инструкции из руководства по началу работы с платформой Google Карт.
Начать работу

Да, я использую ключ API.

Отлично! Проверьте, привязан ли к вашему проекту платежный аккаунт.

Привязан ли к вашему проекту платежный аккаунт?

Не знаю. Как проверить, привязан ли к моему проекту платежный аккаунт?

Откройте страницу оплаты в Google Cloud Console и выберите проект, в котором был создан ключ API. Чтобы подтвердить, что этот ключ связан с проектом, сделайте следующее:

  1. Перейдите в раздел Credentials (Учетные данные), выбрав на левой боковой панели Google Maps Platform > Credentials (Платформа Google Карт > Учетные данные).
  2. Проверьте, есть ли в списке ключ API, который вы используете в настоящее время на своем сайте. Если его здесь нет, перейдите в другой проект и проверьте учетные данные там.
  3. Если вы не можете найти проект для этого ключа, возможно, вы потеряли доступ к этому проекту. Попросите коллег о помощи. Если не получается найти исходный проект, можно сделать следующее:
  1. Создайте новый проект, нажав кнопку Новый проект в списке проектов или Создать проект на странице «Менеджер ресурсов».
  2. Создайте новый ключ API. Это можно сделать на странице Учетные данные. После этого нажмите Создать учетные данные и выберите Ключ API.

После того как вы найдете свой проект в Cloud Console, проверьте, привязан ли к нему платежный аккаунт, в разделе Оплата в боковом меню слева.

Нет, к моему проекту не привязан платежный аккаунт.

Откройте страницу включения оплаты в Cloud Console и добавьте к проекту платежный аккаунт. Дополнительные сведения можно найти в руководстве по началу работы с платформой Google Карт.

Да, к моему проекту привязан платежный аккаунт.

Отлично! Убедитесь, что вы указали действующий способ оплаты.

Возможно, указанный способ оплаты больше не действует (например, истек срок действия кредитной карты)?

Не превышен ли установленный вами дневной лимит на использование API?

Если вы установили для любого из ваших API дневной лимит, предотвращающий неожиданный перерасход, вы можете решить проблему, увеличив этот лимит.

Проверить дневные лимиты можно на панели API и сервисы в Cloud Console. Сделайте следующее:

  1. Если появится запрос, выберите проект.
  2. Выберите API из списка и откройте вкладку Квоты.

Есть ли у вашего ключа API ограничение по IP-адресам?

Ключи API с ограничением по IP-адресам можно использовать только с веб-сервисами, которые предназначены для реализации на стороне сервера (например, Geocoding API и другие API веб-сервисов). Большинство этих веб-сервисов имеют аналоги в Maps JavaScript API (например, сервис геокодирования). Для использования Maps JavaScript API в службах на стороне клиента нужно создать отдельный ключ API, который будет защищен ограничением по ссылающемуся домену HTTP. Подробнее…

Если ваш код по-прежнему не работает

Чтобы помочь вам справиться с наиболее распространенными ошибками, Брендан Кенни и Мано Маркс записали для вас это видео. Вот что они советуют:

  • Ищите опечатки. Помните, что в языке JavaScript учитывается регистр.
  • Не забывайте об основах! Некоторые распространенные проблемы возникают еще на начальном этапе создания карты. Например:
  • заданы ли свойства zoom и center ;
  • объявлен ли элемент div, в котором карта будет отображаться на экране;
  • задана ли для элемента div высота на экране. По умолчанию элементы div создаются с высотой 0 и поэтому не отображаются на экране.

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2023-04-05 UTC.

Источник: developers.google.cn

Рейтинг
Комментарии0
Загрузка ...
Похожие материалы