Добавление Google карты на сайт | Google Maps для сайта — PROG-TIME

Добавление Google карты на сайт | Google Maps для сайта

22.01.2018
Содержание:

Сегодня я вам покажу как добавить карту на свой сайт. На примере мы будем использовать карту от Google. Google карты — набор приложений, построенных на основе бесплатного картографического сервиса и технологии, предоставляемых компанией Google.

Добавление Google карты на свой сайт.

Для того что бы использовать Google Maps на своём сайте, вам необходимо зарегистрироваться на Google почте.

Далее мы переходим по ссылке https://developers.google.cn/maps/?hl=ru и попадаем Google Maps APIs.

Здесь на нужно получить API ключ. Мы нажимаем получить ключ.

Добавление Google карты на свой сайт.

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

Далее мы переходим на главную страницу https://developers.google.cn/maps/ . Здесь мы выбираем платформу на которой будем работать с ключом. В данным случае это платформа WEB.

Добавление Google карты на свой сайт.

Открывается новая страница и мы здесь выбираем Google Maps JavaScript API.

Добавление Google карты на свой сайт.

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

Добавление Google карты на свой сайт.

Скопированный код мы вставляем в код вашего сайта.

Добавление Google карты на свой сайт.

Теперь необходимо вставить ключ, полученный ранее, в свой код, как это сделал я.

Теперь давай подробнее разберём представленный код.

Div с id map – это поле в котором будет находится карта. Её идентификатор менять нельзя, но зато можно изменить размеры и область расположения, добавив дополнительные стили здесь…

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

Здесь есть переменные в которую мы вписываем следующие:

  • Координаты

Координаты мы получаем на сайте Google Maps

  • Значение обработки(если был всё же изменён id контейнера или прочие условия)

  • Уровень приближения карты

  • Обработчик для маркера

А после данного скрипта идёт ещё один скрипт, который отправляет полученные данные на сервис гугл и отображает их на вашем сайте.

Код для добавления Google карты.

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

В итоге мы получаем