Add Map

Use google map in javascript

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

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

TypeScript

JavaScript

CSS

HTML

      
My Google Maps Demo
  
  
index.html

Примеры кода

Начало работы

Процесс создания встроенной в веб-страницу карты Google с маркером состоит из трех этапов:

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

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

Ниже приведен код HTML простейшей веб-страницы.

        
My Google Maps Demo
  
   
index.html

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

Как понять код

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

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

Код ниже определяет область страниц, на которой появится карта Google.

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

/* 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 задает размер и цвет блока div . Чтобы карта появилась на экране, ее ширина и высота в блоке div должны составлять более 0 пикс. В нашем примере высота div составляет 400 пикс., а ширина – 100 % видимой на экране области страницы.

Программа начальной загрузки подготавливает Maps JavaScript API к загрузке (до вызова importLibrary() загрузка библиотек не начинается).

Инструкции по получению ключа см. в разделе 3. Получите ключ API.

2. Добавьте карту с маркером

Ниже показано, как подгрузить на странице Maps JavaScript API и написать фрагмент кода JavaScript, добавляющий с помощью этого API карту с маркером.

TypeScript

JavaScript

Во фрагменте кода выше библиотеки Map и AdvancedMarkerView загружаются при вызове функции initMap() .

Как понять код

Фрагмент кода ниже создает новый объект карт Google и добавляет свойства карты (центральную точку и масштаб). Информация о других свойствах объекта доступна здесь.

TypeScript

JavaScript

Во фрагменте выше код new Map() создает новый объект карт Google. Свойство center сообщает API, где должен находиться центр карты.

Свойство zoom задает масштаб карты. Нулю соответствует самый мелкий масштаб (пользователь видит на экране всю планету). Чем больше значение свойства, тем крупнее масштаб видимой карты.

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

TypeScript

JavaScript

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

Ниже объясняется, как аутентифицировать ваше приложение в Maps JavaScript API с помощью ключа API.

Выполните следующие действия:

1. Войдите в Google Cloud Console.
2. Создайте или выберите проект.
3. Нажмите Continue для активации API и всех связанных служб.
4. На странице Credentials (Учетные данные) получите ключ API и задайте для него ограничения. Если у вас есть действующий ключ API без ограничений или ключ с ограничениями для браузера, можете использовать его.
5. Узнайте, как защитить свою квоту от посторонних и обезопасить ключ API.
6. Включите оплату. Инструкции
7. Скопируйте весь код из руководства на этой странице в текстовый редактор.
8. Замените значение параметра key в URL-адресе своим ключом API (тем, который вы получили только что).

Советы и устранение неполадок

• Чтобы настроить отображение карты, меняйте стиль, свойства и другие переменные. Подробную информацию можно найти в руководствах по стилю и рисованию на карте.
• Используйте Инструменты разработчика в своем веб-браузере, чтобы тестировать и запускать свой код, просматривать отчеты об ошибках и устранять проблемы.
• Открыть консоль в Chrome можно сочетанием клавиш:
  Command+Option+J (Mac) или Control+Shift+J (Windows).
• Чтобы получить географические координаты (широту и долготу) точки на Google Картах:
  1. Откройте Google Карты в браузере.
  2. Нажмите правой кнопкой мыши на точку, координаты которой хотите получить.
  3. В появившемся контекстном меню выберите Что здесь. Появится карточка в нижней части экрана, в последней строке которой записаны значения широты и долготы.
• Преобразовать адрес в географические координаты можно с помощью службы геокодирования. Узнайте, как начать с ней работу.

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

Последнее обновление: 2023-06-26 UTC.

Источник

Платформа Google Карт

Отправить отзыв Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Maps JavaScript API

Создавайте динамические, интерактивные, персонализированные карты и геопространственные объекты для своих веб-приложений.

Начало работы

Начало работы с платформой Google Карт

Ознакомьтесь с кратким руководством платформы Google Карт. Зарегистрируйтесь, сгенерируйте ключ API и приступайте к работе.

Ваша первая карта с маркером

Настройка стиля карты

Задайте все необходимые параметры карты, включая дороги, географические объекты и объекты инфраструктуры.

Информационные окна для маркеров

Возможности

Типы карт

Локализация

Маркеры

Элементы управления

События

Наложение WebGL

Информационные окна

Фигуры

С помощью встроенных функций на карте можно рисовать различные фигуры, в том числе ломаные линии и многоугольники.

Собственные наложения

Наземные наложения

Слой данных

Собственные стили

Наклон и ориентация

Кластеризация маркеров

Тепловые карты

Библиотеки

Вызывайте дополнительные библиотеки в загрузочной строке Maps JS API, чтобы добавить в карту другие функции.

Обзор библиотек

Библиотека Drawing

Библиотека Geometry

Библиотека Places

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

Библиотека локального контекста (бета)

Библиотека Visualization

Службы

Служба Directions

Служба Distance Matrix

Служба Elevation

Служба Geocoding

Служба Maximum Zoom Imagery

Служба Street View

Примеры приложений

Поиск мест

Ночной режим

Настройка значков маркера

Собственные наложения

Слой загруженности дорог

Наклон и ориентация карты

Справка и поддержка

Stack Overflow

Обращайтесь за помощью, помогайте другим, создавайте репутацию Карт.

Система отслеживания ошибок

Сообщайте об ошибках или отправляйте запросы на добавление функций.

Статус платформы

Узнавайте об инцидентах и сбоях платформы.

Поддержка

Обращайтесь за помощью к команде платформы Google Карт.

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

Последнее обновление: 2023-06-26 UTC.

Источник

Платформа Google Карт

Отправить отзыв Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Maps JavaScript API

Создавайте динамические, интерактивные, персонализированные карты и геопространственные объекты для своих веб-приложений.

Начало работы

Начало работы с платформой Google Карт

Ознакомьтесь с кратким руководством платформы Google Карт. Зарегистрируйтесь, сгенерируйте ключ API и приступайте к работе.

Ваша первая карта с маркером

Настройка стиля карты

Задайте все необходимые параметры карты, включая дороги, географические объекты и объекты инфраструктуры.

Информационные окна для маркеров

Возможности

Типы карт

Локализация

Маркеры

Элементы управления

События

Наложение WebGL

Информационные окна

Фигуры

С помощью встроенных функций на карте можно рисовать различные фигуры, в том числе ломаные линии и многоугольники.

Собственные наложения

Наземные наложения

Слой данных

Собственные стили

Наклон и ориентация

Кластеризация маркеров

Тепловые карты

Библиотеки

Вызывайте дополнительные библиотеки в загрузочной строке Maps JS API, чтобы добавить в карту другие функции.

Обзор библиотек

Библиотека Drawing

Библиотека Geometry

Библиотека Places

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

Библиотека локального контекста (бета)

Библиотека Visualization

Службы

Служба Directions

Служба Distance Matrix

Служба Elevation

Служба Geocoding

Служба Maximum Zoom Imagery

Служба Street View

Примеры приложений

Поиск мест

Ночной режим

Настройка значков маркера

Собственные наложения

Слой загруженности дорог

Наклон и ориентация карты

Справка и поддержка

Stack Overflow

Обращайтесь за помощью, помогайте другим, создавайте репутацию Карт.

Система отслеживания ошибок

Сообщайте об ошибках или отправляйте запросы на добавление функций.

Статус платформы

Узнавайте об инцидентах и сбоях платформы.

Поддержка

Обращайтесь за помощью к команде платформы Google Карт.

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

Последнее обновление: 2023-06-26 UTC.

Источник