Главная » Языки программирования

Simple Markers

Содержание
  1. Simple Markers
  2. TypeScript
  3. JavaScript
  4. CSS
  5. HTML
  6. Try Sample
  7. Clone Sample
  8. Google map with marker html
  9. TypeScript
  10. JavaScript
  11. CSS
  12. HTML
  13. My Google Maps Demo
  14. Примеры кода
  15. Начало работы
  16. 1. Создайте страницу HTML
  17. My Google Maps Demo
  18. Как понять код
  19. 2. Добавьте карту с маркером
  20. TypeScript
  21. JavaScript
  22. Как понять код
  23. TypeScript
  24. JavaScript
  25. TypeScript
  26. JavaScript
  27. 3. Получите ключ API
  28. Советы и устранение неполадок

Simple Markers

Advanced markers are now available! Advanced markers provide improved functionality and performance over legacy markers.

This example identifies a location on the map with a marker.

TypeScript

JavaScript

CSS

HTML

       
  
index.html

Try Sample

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

git clone -b sample-marker-simple https://github.com/googlemaps/js-samples.git cd js-samples npm i npm start

Other samples can be tried by switching to any branch beginning with sample- SAMPLE_NAME .

git checkout sample-SAMPLE_NAME npm i npm start

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2023-07-18 UTC.

Источник

Google map with marker html

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

Читайте также:  Vue js подключить css файл

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

Примеры кода могут быть недоступны в вашем регионе.

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.

Источник

Оцените статью
© 2024 Программирование