Как добавить карты Google с маркером на сайт

Опубликовано: 14 Июля, 2021

Карты Google - это картографический веб-сервис, разработанный Google. Он предлагает спутниковые изображения, карты улиц, панорамные виды улиц на 360 ° (Street View), условия дорожного движения в реальном времени (Google Traffic) и планирование маршрутов для путешествий пешком, на машине, велосипеде (в бета-версии) или на общественном транспорте.

Чтобы добавить Карты Google с маркером на веб-сайт, необходимо выполнить три основных шага:

Создать HTML-страницу
Добавить карту с маркером

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

Шаг 1: Создание страницы Html.

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

Выход :

Данный код описывает CSS, который устанавливает размер и цвет div. Элемент style устанавливает размер div для вашей карты. Div имеет высоту 400 пикселей и ширину 100% для отображения карты по всей ширине вашей веб-страницы.

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

Шаг 2: Добавление карты с маркером:

 <!DOCTYPE html>
 < html >
  < head >
    < style >
      #map {
        height: 400px;
        width: 100%;
       }
    </ style >
  </ head >
  < body >
    < p >My Google Maps Demo</ p >
    < div id = "map" ></ div >
    < script >
      function initMap() {
        var test= {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: test
        });
        var marker = new google.maps.Marker({
          position: test,
          map: map
        });
      }
    </ script >
    < async defer script
    src =
 " https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap " >
    </ script >
  </ body >
 </ html > 

Объяснение :

В коде скрипт загружает API с указанного URL.
Параметр обратного вызова выполняет функцию initMap после загрузки API.
Атрибут async позволяет браузеру продолжать визуализацию остальной части страницы во время загрузки API.
Параметр key содержит ключ API.
Введите свой ключ api внутри «key =».
Код содержит функцию initMap, которая инициализирует и добавляет карту при загрузке веб-страницы. Тег скрипта можно использовать для добавления вашего собственного javascript.
Код создает новый объект карт Google и добавляет свойства к карте, включая центр и уровень масштабирования.
В приведенном ниже коде new google.maps.Map () создает новый объект Google Maps.
Свойство center сообщает API, где центрировать карту. Координаты карты задаются в следующем порядке: широта, долгота.
Свойство масштабирования определяет уровень масштабирования карты. Масштаб: 0 - самый низкий масштаб, отображающий всю Землю. Установите более высокое значение масштабирования, чтобы приблизить изображение Земли с более высоким разрешением.

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

Шаг 3. Получение ключа API
Ниже приведены шаги, необходимые для получения ключа API:

Перейдите по указанной ниже ссылке
https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true.
Создайте новый проект или выберите из существующих проектов.
Нажмите «Продолжить», чтобы включить API.
На странице учетных данных получите ключ API (и установите ограничения ключа API).

Замените значение ключевого параметра в URL-адресе своим собственным ключом API.

Выход :

Пример: Добавление города офиса GeeksforGeeks на карты Google

ВХОД :

 <!DOCTYPE html>
 < html >
  < head >
    < style >
      #map {
        height: 400px;
        width: 100%;
       }
    </ style >
  </ head >
  < body >
    < h3 >GFG Google Maps Demo</ h3 >
    < div id = "map" ></ div >
    < script >
      function initMap() {
        var uluru = {lat: 28.501859, lng: 77.410320};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </ script >
    < async defer script
    src=
 " https://maps.googleapis.com/maps/api/js? key =
 AIzaSyB2bXKNDezDf6YNVc -SauobynNHPo4RJb8& callback = initMap ">
    </ script >
  </ body >
 </ html > 

Выход :

Эта статья предоставлена Шубродипом Банерджи. Если вам нравится GeeksforGeeks, и вы хотели бы внести свой вклад, вы также можете написать статью с помощью provide.geeksforgeeks.org или отправить ее по электронной почте на deposit@geeksforgeeks.org. Посмотрите, как ваша статья появляется на главной странице GeeksforGeeks, и помогите другим гикам.

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

Technical Scripter HTML HTML-Misc

Как добавить карты Google с маркером на сайт

РЕКОМЕНДУЕМЫЕ СТАТЬИ