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

Сегодня я вам покажу как добавить карту на свой сайт. На примере мы будем использовать карту от 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>

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

Все файлы из данной записи:

https://yadi.sk/d/RRPJPXvO3RgAGr – Файл со скриптом

На этом всё!

Если у вас есть вопросы, пишите их в нашей группе – https://vk.com/prog_time .В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.

Так же прокачивайте свой навык на практике, смотря ролики с нашего канала

https://www.youtube.com/channel/UCF_m4pWmG7zor1hHBCf_PqA

Рекомендованные

 

Вам также будет интересно

 

comments powered by HyperComments