Я сделаю все возможное, чтобы помочь вам настроить очень простое веб-приложение, использующее Google Maps API. Я использовал этот API в школьном проекте, поэтому подумал, что объяснение может принести пользу всем, в том числе и мне. API JavaScript Карт Google позволяет настраивать карты, добавляя в них собственный контент и изображения для отображения на веб-страницах и мобильных устройствах. Maps JavaScript API включает четыре основных типа карт (дорожная карта, спутниковая, гибридная и рельефная), которые вы можете изменять, используя слои и стили, элементы управления и события, а также различные службы и библиотеки.

Получите ключ API Карт Google

Хорошо, первое, что вам нужно сделать, это перейти на Веб-сайт Google Maps API, чтобы создать свою учетную запись или использовать любую существующую учетную запись Google. После входа в систему вам необходимо включить платформу Google Maps. Вы можете сделать это, найдя и нажав кнопку Начать. У вас должно появиться всплывающее окно, подобное этому:

В этом упражнении мы хотим выбрать «Карты» и продолжить. Далее вам нужно будет выбрать проект. Если у вас его нет, вы можете просто создать его с любым именем и продолжить. После этого Google потребуется, чтобы вы настроили свои платежные данные, чтобы продолжить. Не волнуйтесь, с небольшими проектами вряд ли вы будете совершать достаточно вызовов API, чтобы начать тратить деньги. Вот прайс-лист, чтобы вы могли убедиться:

После того, как все это настроено, вы можете включить JavaScript API Карт Google в консоли разработчика Google. Он должен вернуть вам ключ API для использования, но в противном случае вы можете попасть туда, щелкнув меню навигации и войдя в «API и службы», а затем в «Учетные данные». Теперь вы можете нажать «Создать учетные данные», чтобы получить свой ключ API. Он может попросить вас ограничить ваш ключ, чтобы никто другой не мог его использовать, и, вероятно, это будет хорошей идеей.

Настроить файл

Сначала вам понадобится шаблонный HTML, поэтому создайте каталог с файлом index.html внутри. Мне нравится использовать Эммет, который доступен во множестве различных текстовых редакторов. С помощью emmet я могу просто набрать !, а затем нажать кнопку tab, чтобы создать базовый HTML. Если вы не хотите делать все это, вы можете просто использовать этот шаблонный HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Google Map</title>
</head>
<body>
</body>
</html>

Инициализировать Google Карты

Теперь, когда у нас есть HTML-код, мы можем начать добавлять теги ‹script› для связи с Google Maps API. Этот скрипт даст нам доступ ко всем вкусностям. В конце тега body вы захотите добавить этот тег скрипта:

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

Вам нужно будет заменить «YOUR_API_KEY» на ключ, который вы создали в консоли разработчика Google. Если вы внимательно посмотрите на этот тег скрипта, вы увидите параметр callback = initMap в конце ссылки. Это вызовет функцию initMap (), поэтому нам нужно будет настроить некоторый JavaScript для инициализации нашей карты. Технически этот обратный вызов вам не нужен, есть другие способы сделать это, но мы воспользуемся им в этом упражнении.

Затем давайте вставим несколько тегов скрипта над теми, которые мы только что вставили, и запустим нашу функцию инициализации карты. Я собираюсь называть функцию тем же, что вызывает наш скрипт API, initMap (). Внутри этой функции мы собираемся создать новую карту. Для этого нам нужно вызвать и передать несколько вещей:

new google.maps.Map(ui_element_to_attach_map_to, map_options_object)

Мы можем сохранить эти аргументы в переменных, а затем передать их функции, чтобы наш код был немного чище. Прежде чем мы сможем это сделать, нам нужно создать элемент внутри нашего ‹body›, к которому мы будем прикреплять нашу карту. Давайте добавим ‹div› с идентификатором, равным «карта», над нашими тегами ‹script›:

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

Теперь у нас есть элемент, который мы можем захватить и прикрепить к карте. Второе, что нам нужно, это объект параметров карты, который устанавливает уровень масштабирования карты и место, где он будет центрировать карту. В целом наше тело должно выглядеть так:

<body>
<div id="map"></div>
<script>
function initMap() {
const mapDiv = document.getElementById('map')
const options = {
zoom: 12,
center: { lat: 29.7604, lng: -95.3698 }
}
const map = new google.maps.Map(mapDiv, options)
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>

Мы еще не закончили, но наша карта еще не появится, потому что нам нужно добавить некоторый стиль к элементу, содержащему нашу карту. Мы можем просто вставить тег ‹style› в конец нашего тега ‹head›:

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

Если вы выполнили эти шаги правильно, вы сможете открыть index.html и увидеть только что созданную карту. Вы можете поиграть с переменной «options», которую мы создали для передачи:

new google.maps.Map(mapDiv, options)

Уменьшая масштаб, вы еще больше уменьшите масштаб карты, а увеличение значения приведет к увеличению. Чтобы изменить широту и долготу, вам нужно будет найти координаты в Интернете, чтобы заменить их в коде и центрировать карту в любом месте. нравиться.

Создание и настройка маркера

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

new google.maps.Marker(marker_attributes)

Наши «marker_attributes» будут объектом с необходимыми атрибутами для создания нового маркера. Нам нужно указать ему положение маркера в виде объекта с ключами широты и долготы. Нам также нужно передать карту, на которую мы хотим добавить маркер. В этом случае мы сохранили нашу новую карту в переменной под названием «карта». Наш код для создания нового маркера может выглядеть так:

const marker = new google.maps.Marker({
  position: { lat: 29.7604, lng: -95.3698 }
  map: map
});

С помощью этого кода у вас должен быть новый маркер на вашей карте, и если вы хотите, вы можете добавить ключ «icon:» со значением ссылки, ведущей к значку из Google, к объекту, который мы передали при создании нового экземпляра маркера. Хотелось бы такого:

const marker = new google.maps.Marker({
  position: { lat: 29.7604, lng: -95.3698 }
  map: map
 icon:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
});

Эта конкретная ссылка превратит ваш маркер в пляжный флаг, например:

Присоединение информационного окна к маркеру

Информационное окно обычно всплывает всякий раз, когда вы нажимаете на маркер, чтобы просмотреть дополнительную информацию. Создать новое информационное окно достаточно просто. Нам просто нужно создать новое информационное окно, когда мы создаем маркер, а также прикрепить прослушиватель событий к маркеру, чтобы он знал, что нужно открывать информационное окно, когда мы щелкаем по нему. Мы можем передать объект с ключом «content:» и значением HTML, которое мы хотим отобразить внутри информационного окна. После этого мы прикрепляем прослушиватель событий к маркеру для вызова «.open ()» в нашей переменной «infoWindow». Мы сохранили только что созданное информационное окно. Вот как это должно выглядеть:

const infoWindow = new google.maps.InfoWindow({
    content: `<h1>Houston, Tx</h1>`
  })
  marker.addListener('click', function () {
    infoWindow.open(map, marker)
})

Вы должны иметь возможность щелкнуть маркер и увидеть всплывающее информационное окно с HTML-кодом, который мы отрисовали внутри.

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

Вот готовый код (для работы вам понадобится собственный ключ API):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Google Map</title>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
  const mapDiv = document.getElementById('map')
  const options = {
    zoom: 12,
    center: { lat: 29.7604, lng: -95.3698 }
  }
  const map = new google.maps.Map(mapDiv, options);
  const marker = new google.maps.Marker({
    position: { lat: 29.7604, lng: -95.3698 },
    map: map,
 icon:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
  });
  const infoWindow = new google.maps.InfoWindow({
    content: `<h1>Houston, Tx</h1>`
  })
  marker.addListener('click', function () {
    infoWindow.open(map, marker)
  })
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>