#1. Как вставить карту Google на сайт

Google Maps API v3 позволяет легко и просто добавить карту на любую страницу вашего сайта, даже если вы не особо владеете языком JavaScript.

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

Первый урок мы посвятим теме "Как установить Google Maps на сайт?"

Для этого нам нужно сделать 4 простых шага.

Шаг 1 - подключаем Google Maps API

Подключаем к странице JavaScript файл, который загрузит все компоненты карты. Также обратите внимание, что в указанном пути нужно написать ваш ключ API для грамотной работы Google Maps (как получить ключ описано ниже).

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

<!DOCTYPE html>
<html lang="ru">
    <head>
        ...
        <script src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ"></script>
        ...
    </head>
    <body>
Как получить ключ Google Maps API?

1. Вы должны войти в свой аккаунт на Google. Если у вас его нет, то просто зарегистрируйтесь там.

2. Перейдите на страницу Google Developers Console

3. Выберите "Создать новый проект" или если вы уже создавали проекты ранее, то выберите существующий. Затем нажмите "Продолжить".

4. Укажите произвольное название для ключа. По желанию, вы можете еще указать домен сайта на котором и будет использоваться данный ключ, но это необязательно.

Затем нажмите кнопку "Создать".

5. Вот тот самый ключ, который и нужно указывать при подключении Google Maps API


Шаг 2 - размещаем карту на странице сайта

В том месте, где требуется вывести карту, мы вставляем тег (подойдет любой блочный элемент), которому задаем уникальный ID и также желательно указать class.

Название ID и класса могут быть произвольными и не обязательно должны совпадать, как в нашем случае.

    <body>
    	...
		<div id="map" class="map"></div>
		...
    </body>

Шаг 3 - задаем размеры карты

Теперь в таблицу стилей добавим следующее правило, в котором зададим размеры для нашей будущей карты.

Размеры можно задавать в любых единицах доступных в CSS.

.map {
	width: 100%;
	height: 400px;
}

Шаг 4 - инициализируем карту

После подключения Google Maps API (шаг 1), нам необходимо вызвать функцию инициализации карты, указанную ниже.

// initMap() - функция инициализации карты
function initMap() {
	// Координаты центра на карте. Широта: 56.2928515, Долгота: 43.7866641
	var centerLatLng = new google.maps.LatLng(56.2928515, 43.7866641);

	// Обязательные опции с которыми будет проинициализированна карта
	var mapOptions = {
		center: centerLatLng, // Координаты центра мы берем из переменной centerLatLng
		zoom: 8               // Зум по умолчанию. Возможные значения от 0 до 21
	};

	// Создаем карту внутри элемента #map
	var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

// Ждем полной загрузки страницы, после этого запускаем initMap()
google.maps.event.addDomListener(window, "load", initMap);

Ну и напоследок, откуда брать значения широты и долготы?

1. Заходим на сайт Google Map

2. Находим на карте требуемый объект

3. Кликаем по нему правой кнопкой мыши и выбираем "Что здесь?"

4. На карте появится окошко в котором будет прописана широта и долгота. Эти значения нам и нужно использовать при работе с Google Maps API

В следующей статье мы узнаем, как добавить маркер на нашу карту.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (12)

konsty 18 октября 2016 г. в 22:57

Спасибо, очень помогли!

Ответить

maximus 18 августа 2016 г. в 19:44

Спасибо большое за статью, все чётко и ясно написано

Ответить

Константин 14 июля 2016 г. в 17:55

Кстати, на сайтах, которые появились после 22 июня 2016 уже обязательно нужно использовать api ключ. Без ключа не работает

Ответить

Владимир 6 июня 2016 г. в 18:15

Спасибо. Всё сделал, но ничего не работает. А как получить ключ Вы так и не написали.

Ответить
Показать все комментарии

Александр Пауков 7 июня 2016 г. в 09:33

Владимир, пришлите мне на почту, что вы сделали, надо разобраться, почему у вас не работает. Почта alexanderpaukov(собака)mail.ru Что касается получения ключа, то данный процесс описан в статье. Найдите заголовок "Шаг 2 - размещаем карту на странице сайта" и прямо над ним есть еще один - "Как получить ключ Google Maps API?". Кликните по данному заголовку и там будет описание получения ключа.

Ответить

Марина 8 июня 2016 г. в 16:46

Александр, у меня тоже выдает ошибку и пишет "При загрузке Google Карт на этой странице возникла проблема. Подробности вы найдете в консоли JavaScript. "

Ответить

Марина 8 июня 2016 г. в 16:54

Александр, убрала ключ. Без ключа загрузилась карта.

Ответить

Марина 8 июня 2016 г. в 17:20

Александр , вот что выдает консоль: Ошибка
Возможно ваш проект API удален из Google Developers Console. Проверьте проект, для которого вы сгенерировали ключ API, указанный в загрузчике JavaScript API. Вы можете создать новый проект API и получить новый ключ в Google Developers Console.

Что то неправильно с созданием ключа.

Ответить

Александр Пауков 8 июня 2016 г. в 19:33

Марина, а у вас при создании ключа все было, как на скриншотах? То есть, Google не предлагал заполнить какие-то дополнительные поля?

Ответить

Марина 8 июня 2016 г. в 22:17

Александр, спасибо! Все работает по Вашей инструкции. Cлучайно в ключ добавила какой-то лишний символ при копировании.

Ответить

Vlad 2 июня 2016 г. в 13:02

Спасибо большое!
Очень полезно!

Ответить

Андрей 2 июня 2016 г. в 07:37

Спасибо за полезную статью, возьму на вооружение!

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад