02 Июн 2023
3 мин
242

Как создать сайт с картой Google Maps, на которой отмечены места

Узнайте, как создать сайт с картой Google Maps и отметить на ней интересующие вас места, следуя пошаговому руководству в этой статье.

Содержание

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

1. Получение API-ключа Google Maps

Для работы с картами Google Maps вам потребуется API-ключ. Чтобы получить его, выполните следующие шаги:

  1. Перейдите на Google Cloud Platform Console.
  2. Создайте новый проект или выберите существующий.
  3. В поисковой строке введите «Maps JavaScript API» и перейдите на страницу данного API.
  4. Нажмите «Enable» (Включить), чтобы активировать API для вашего проекта.
  5. В разделе «Credentials» (Учетные данные) создайте новый API-ключ.

Теперь у вас есть API-ключ, который понадобится для работы с картами Google Maps на вашем сайте.

2. Создание HTML-страницы с картой Google Maps

Создайте новую HTML-страницу и добавьте следующий код:

<!DOCTYPE html>
<html>
<head>
  <title>Сайт с картой Google Maps</title>
  <style>
    /* Установка размеров для карты */
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>

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

<script>
  function initMap() {
    // Координаты центра карты
    var center = {lat: 55.751244, lng: 37.618423};

    // Создание карты
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: center
    });

    // Создание маркера
    var marker = new google.maps.Marker({
      position: center,
      map: map
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ&callback=initMap">
</script>

</body>
</html>

Не забудьте заменить «ВАШAPIКЛЮЧ» на ваш реальный API-ключ.

3. Добавление мест на карту

Чтобы отметить места на карте, вам потребуется их координаты (широта и долгота). Вы можете использовать сервисы вроде latlong.net для получения координат. Добавьте несколько мест, используя следующий код:

// Массив мест
var places = [
  {lat: 55.751244, lng: 37.618423, title: 'Место 1'},
  {lat: 55.759070, lng: 37.564107, title: 'Место 2'},
  {lat: 55.781330, lng: 37.702800, title: 'Место 3'}
];

// Добавление маркеров на карту
for (var i = 0; i &lt; places.length; i++) {
  new google.maps.Marker({
    position: places[i],
    map: map,
    title: places[i].title
  });
}

Вставьте данный код в функцию initMap() после создания карты.

Заключение

Теперь у вас есть простой сайт с картой Google Maps, на которой отмечены места. Вы можете дополнительно настроить карту, добавлять новые места и использовать другие сервисы, предоставляемые Google Maps API. Удачи вам в создании своего сайта! 😊

Если вам нужна дополнительная помощь или обучение по веб-разработке, рекомендую обратиться в школу.

Добавить комментарий