#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>

[hide headline="Как получить ключ Google Maps API?"]
1. Вы должны войти в свой аккаунт на Google. Если у вас его нет, то просто зарегистрируйтесь там.

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

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

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

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

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


[/hide]

Шаг 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

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

Добавить комментарий

  • Спасибо огромное! Всё кратко, чётко и понятно.
    Единственный вопрос был с ключом, вернее с его отсутствием. После того как убрал "ВАШ_API_КЛЮЧ" и оставил <script src="https://maps.googleapis.com/maps/api/js?key="></script> всё заработало.

  • 18.10.2016 22:57

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

  • 18.08.2016 19:44

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

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

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

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

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

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

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

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

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

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

  • 02.06.2016 13:02

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

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