- How to add google map in html
- TypeScript
- JavaScript
- CSS
- HTML
- My Google Maps Demo
- Примеры кода
- Начало работы
- 1. Создайте страницу HTML
- My Google Maps Demo
- Как понять код
- 2. Добавьте карту с маркером
- TypeScript
- JavaScript
- Как понять код
- TypeScript
- JavaScript
- TypeScript
- JavaScript
- 3. Получите ключ API
- Советы и устранение неполадок
- How to Embed a Google Map in HTML
- Getting the Google Map Code
- Embedding the Google Map Code
- Expert Q&A
- Tips
- You Might Also Like
How to add google map in html
Из этой инструкции вы узнаете, как добавить на веб-страницу простую карту 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.
Выполните следующие действия:
- Войдите в Google Cloud Console.
- Создайте или выберите проект.
- Нажмите Continue для активации API и всех связанных служб.
- На странице Credentials (Учетные данные) получите ключ API и задайте для него ограничения. Если у вас есть действующий ключ API без ограничений или ключ с ограничениями для браузера, можете использовать его.
- Узнайте, как защитить свою квоту от посторонних и обезопасить ключ API.
- Включите оплату. Инструкции
- Скопируйте весь код из руководства на этой странице в текстовый редактор.
- Замените значение параметра key в URL-адресе своим ключом API (тем, который вы получили только что).
Советы и устранение неполадок
- Чтобы настроить отображение карты, меняйте стиль, свойства и другие переменные. Подробную информацию можно найти в руководствах по стилю и рисованию на карте.
- Используйте Инструменты разработчика в своем веб-браузере, чтобы тестировать и запускать свой код, просматривать отчеты об ошибках и устранять проблемы.
- Открыть консоль в Chrome можно сочетанием клавиш:
Command+Option+J (Mac) или Control+Shift+J (Windows).- Чтобы получить географические координаты (широту и долготу) точки на Google Картах:
- Откройте Google Карты в браузере.
- Нажмите правой кнопкой мыши на точку, координаты которой хотите получить.
- В появившемся контекстном меню выберите Что здесь. Появится карточка в нижней части экрана, в последней строке которой записаны значения широты и долготы.
- Преобразовать адрес в географические координаты можно с помощью службы геокодирования. Узнайте, как начать с ней работу.
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2023-06-26 UTC.
How to Embed a Google Map in HTML
This article was co-authored by wikiHow staff writer, Darlene Antonelli, MA. Darlene Antonelli is a Technology Writer and Editor for wikiHow. Darlene has experience teaching college courses, writing technology-related articles, and working hands-on in the technology field. She earned an MA in Writing from Rowan University in 2012 and wrote her thesis on online communities and the personalities curated in such communities.
This article has been viewed 20,087 times.
Having a map of the area you are talking about on your website might be extremely useful. This wikiHow will show you how to embed a Google Map in HTML.
Getting the Google Map Code
Go to the location you want to share at https://www.google.com/maps. This will open a map specifically within Google Maps.
Click Share or embed map . You might see “Link to this map” instead. This option is toward the bottom of the menu. [1] X Research source
Select the size of the map you want. Next to the field of text, you’ll see SMALL, MEDIUM, LARGE, or CUSTOM SIZE. Click the small arrow pointing down to change the map size.
Copy the text provided. You can use the keyboard shortcuts Ctrl + C (Windows) or ⌘ Cmd + C (Mac) to copy the text. On a mobile device, you can long-tap the text for the “Select all” and “Copy” options.
Embedding the Google Map Code
Open your HTML. You could use a program like Dreamweaver or use a simple word-processing app like Notepad and TextEdit in which you edit your HTML file.
Navigate to where you want to embed the Google Map code. In applications like Dreamweaver, you can see what the code translates into on a web page, so you can easily navigate through the HTML code. Without those applications, you will need to know where you are on the web page by looking at the code.
Paste the Google Maps code. You can use keyboard shortcuts by pressing Ctrl + P (Windows) or ⌘ Cmd + P (Mac). On a mobile device, you can long-tap the text field and tap “Paste” when the option appears.
Expert Q&A
Tips
You Might Also Like
When Will a Google Street View Car Come to Your Area?
Find Latitude and Longitude in Google Maps: Mobile & Desktop
2 Easy Ways to Add a Location or Business to Google Maps
How to Track Someone’s Location in Google Maps
Go Back in Time on Google Maps: See Historical Location Pictures
How to Add Your Business to Google Maps
2 Ways to Change the Voice on Google Maps
How to Download a Photo from Google Maps
How to Type GPS Coordinates into Google Maps: Desktop & Mobile
Get Walking Directions on Google Maps: A Complete Guide
How to Add a Marker in Google Maps