Add Map

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, состоящую из заглавия и тела.

Читайте также:  Can you outline text in 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.

Источник

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

Image titled Embed a Google Map in HTML Step 1

Go to the location you want to share at https://www.google.com/maps. This will open a map specifically within Google Maps.

Image titled Embed a Google Map in HTML Step 2

Image titled Embed a Google Map in HTML Step 3

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

Image titled Embed a Google Map in HTML Step 4

Image titled Embed a Google Map in HTML Step 5

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.

Image titled Embed a Google Map in HTML Step 6

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

Image titled Embed a Google Map in HTML Step 7

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.

Image titled Embed a Google Map in HTML Step 8

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.

Image titled Embed a Google Map in HTML Step 9

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

Know when Google Maps Is Coming

When Will a Google Street View Car Come to Your Area?

Get Latitude and Longitude from Google Maps

Find Latitude and Longitude in Google Maps: Mobile & Desktop

Get Current Location on Google Maps

Add Places to Google Maps

2 Easy Ways to Add a Location or Business to Google Maps

Track in Google Maps

How to Track Someone’s Location in Google Maps

Find North on Google Maps on PC or Mac

Go Back in Time on Google Maps

Go Back in Time on Google Maps: See Historical Location Pictures

Add a Business to Google Maps

How to Add Your Business to Google Maps

Change the Google Maps Voice

2 Ways to Change the Voice on Google Maps

Download an Image from Google Maps

How to Download a Photo from Google Maps

Use Google Maps to Track Your Run

Enter GPS Coordinates in Google Maps

How to Type GPS Coordinates into Google Maps: Desktop & Mobile

Get Walking Directions on Google Maps

Get Walking Directions on Google Maps: A Complete Guide

Add a Marker in Google Maps

How to Add a Marker in Google Maps

Источник

Оцените статью