Как использовать Google Map API на своем сайте?

Опубликовано 02 March 2020

Добавление карты Google с маркером на ваш сайт


Из этого туториала Вы узнаете, как добавить простую карту Google с маркером на веб-страницу. Он подходит людям с начальным или средним знанием HTML и CSS и небольшим знанием JavaScript. Для расширенного руководства по созданию карт, прочитайте руководство разработчика.


Ниже приведена карта, которую вы создадите с помощью этого руководства. Маркер расположен в Uluru  (также известной как Айерс-Рок) в национальном парке Улуру-Ката Тьюта.

Как использовать Google Map API на своем сайте?

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


Попробуй сам


Вы можете поэкспериментировать с этим кодом в JSFiddle, щелкнув значок <> в правом верхнем углу окна кода.

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>


Начало


Существует три шага для создания карты Google с маркером на вашей веб-странице:


  1. Создать страницу HTML
  2. Добавить карту с маркером
  3. Получить ключ API


Вам нужен веб-браузер. Выберите Google Chrome (рекомендуется), Firefox, Safari или Internet Explorer, в зависимости от вашей платформы.


Шаг 1. Создайте HTML-страницу


Вот код для базовой веб-страницы HTML:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 100%;
        height: 400px;
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
  </body>
</html>


Обратите внимание, что это очень простая страница с заголовком третьего уровня (h3), одним элементом div и элементом стиля. Вы можете добавить любой контент, который вам нравится, на веб-страницу.


Понимание кода

Код ниже создает HTML-страницу, состоящую из заголовка и тела.


<html>
 <head>
 </head>
 <body>
 </body>
</html>


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


<h3>My Google Maps Demo</h3>

The code below defines an area of the page for your Google map.

<div id="map"></div>


На этом этапе урока div выглядит как серый блок, потому что вы еще не добавили карту. Код ниже описывает CSS, который устанавливает размер и цвет div.


<style>
 #map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>


В приведенном выше коде элемент style устанавливает размер div для вашей карты. Установите ширину и высоту div больше 0px, чтобы карта была видимой. В этом случае div устанавливается на высоту 400 пикселей и ширину 100%, чтобы отобразить ширину вашей веб-страницы. Примените background-color: grey к div для просмотра области вашей карты на веб-странице.


Шаг 2: Добавьте карту с маркером


В этом разделе показано, как загрузить JavaScript API Карт на свою веб-страницу и как написать собственный JavaScript, который использует API для добавления карты с маркером на нем.


<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>


Понимание кода


Обратите внимание, что вышеприведенный пример больше не содержит CSS, который окрашивает div в серый. Это потому, что div теперь содержит карту.


В приведенном ниже коде скрипт загружает API с указанного URL.


<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>


В приведенном выше коде параметр обратного вызова выполняет функцию initMap после загрузки API. Атрибут async позволяет браузеру продолжать визуализацию остальной части вашей страницы, пока загружается API. Параметр key содержит ваш ключ API. Вам не нужен ваш собственный ключ API при экспериментировании с этим руководством в JSFiddle. См. Шаг 3. Получение ключа API для получения инструкций по получению собственного ключа API.


Приведенный ниже код содержит функцию initMap, которая инициализирует и добавляет карту при загрузке веб-страницы. Используйте тег script, чтобы включить свой собственный JavaScript, который содержит функцию initMap.


<script>
  function initMap() {
  }
</script>


Добавьте функцию

getElementById (), 

чтобы найти div карты на веб-странице.


Приведенный ниже код создает новый объект карт Google и добавляет на карту свойства, включая центр и уровень масштабирования. Смотрите документацию для других вариантов собственности.


{
  var uluru = {lat: -25.344, lng: 131.036};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

}


В приведенном выше коде новый google.maps.Map () создает новый объект Google maps. Свойство center указывает API, где центрировать карту. Координаты карты задаются в следующем порядке: широта, долгота.


Свойство zoom определяет уровень масштабирования для карты. Масштаб: 0 - самый низкий масштаб, отображающий всю Землю. Установите значение масштабирования выше, чтобы увеличить масштаб изображения при более высоком разрешении.


Код ниже помещает маркер на карту. Свойство position устанавливает положение маркера.


var marker = new google.maps.Marker({
  position: uluru,
  map: map
});


Шаг 3: Получить ключ API


В этом разделе объясняется, как аутентифицировать ваше приложение в API JavaScript JavaScript, используя свой собственный ключ API.


Выполните следующие шаги, чтобы получить ключ API:


  1. Перейдите в консоль Google Cloud Platform.
  2. Создать или выбрать проект.
  3. Нажмите «Продолжить», чтобы включить API и все связанные службы.
  4. На странице Credentials получите ключ API (и установите ограничения ключа API). Примечание. Если у вас есть неограниченный ключ API или ключ с ограничениями браузера, вы можете использовать этот ключ.
  5. Чтобы предотвратить кражу квот и защитить ваш ключ API, см. Раздел Использование ключей API.
  6. (Необязательно) Включить биллинг. См. Ограничения использования для получения дополнительной информации.
  7. Скопируйте весь код этого туториала с этой страницы в ваш текстовый редактор. Если у вас еще нет текстового редактора, вот несколько рекомендаций: Вы можете использовать: Notepad ++ (для Windows); TextEdit (для macOS); gedit, KWrite и другие (для машин с Linux).
  8. Замените значение параметра ключа в URL своим собственным ключом API (это ключ API, который вы только что получили).
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>


9. Сохраните этот файл с именем, оканчивающимся на .html, например google-maps.html.

10. Загрузите файл HTML в веб-браузер, перетащив его с рабочего стола в браузер. Кроме того, двойной щелчок по файлу работает в большинстве операционных систем.


Советы и устранение неисправностей

Совет. Ознакомьтесь с решением Store Locator, чтобы увидеть более полные примеры использования пользовательских маркеров для визуализации данных на карте.


Используйте интерфейс JSFiddle для отображения кода HTML, CSS и JavaScript на отдельных панелях. Вы можете запустить код и отобразить вывод на панели результатов.

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

Используйте консоль разработчика в веб-браузере для тестирования и запуска своего кода, чтения отчетов об ошибках и решения проблем с вашим кодом.

Используйте следующие сочетания клавиш, чтобы открыть консоль в Chrome:

Command + Option + J (в Mac) или Control + Shift + J (в Windows).

Следуйте приведенным ниже инструкциям, чтобы получить координаты широты и долготы для местоположения на Картах Google.

  1. Откройте Google Карты в браузере.
  2. Щелкните правой кнопкой мыши точное местоположение на карте, для которого вам нужны координаты.
  3. Выберите «Что здесь» в появившемся контекстном меню. Карта отображает карту в нижней части экрана. Найдите координаты широты и долготы в последнем ряду карты.

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