Добавление на гугл карты. Вставка карты Google Maps. Плагин Google Maps

Всем привет! Сегодня мы научимся не только устанавливать карту Google Map s на свой сайт (любую html страницу), но и стилизовать карты Google Maps — изменять цвета карты, а также добавлять описание к маркеру карты Google Maps, изменять вид (изображение) маркера и добавлять к нему свое описание. Поехали!)

Важное примечание. Все наши эксперименты мы будем делать локально. Для того чтобы использовать карты Google Maps на своем сайте необходимо получить специальный Auth ключ. Сделать это несложно. Его получение мы опустим и рассматривать не будем.

1. Вставка карты Google Maps

Для начала давайте создадим html страницу и вставим на нее карту Google Maps. Делать это мы будем с помощью Google Maps API. То есть пойдем продвинутым путем. Надо заметить что у Google есть хорошая документация и инструкция на русском и английском по использованию Google Maps. Так что программисты могут сразу отправиться туда. Если же вы хотите получить понятный пошаговый урок — то оставайтесь.

Теперь я опишу по очереди действия которые необходимо сделать и после приведу код страницы с комментариями. Сперва создаем HTML страницу. Затем:

На странице создаем элемент внутри которого у нас будет отображаться карта Google Maps.

Необходимо стилизовать этот элемент, задать ему высоту и ширину чтобы он был виден на странице.

Подключаем библиотеку Google Maps Api, чтобы создать карту и управлять ей. Без этой библиотеки карта не заработает.

Пишем скрипт который создаст и отобразит карту Google Maps на странице.

Вот код страницы который у нас получился. Обратите внимание на комментарии внутри, я описал что и где происходит.

01 - My Google Map #map { width: 100%; height: 500px; } // Определяем переменную map var map; // Функция initMap которая отрисует карту на странице function initMap() { // В переменной map создаем объект карты GoogleMaps и вешаем эту переменную на map = new google.maps.Map(document.getElementById("map"), { // При создании объекта карты необходимо указать его свойства // center - определяем точку на которой карта будет центрироваться center: {lat: -34.397, lng: 150.644}, // zoom - определяет масштаб. 0 - видно всю платнеу. 18 - видно дома и улицы города. zoom: 8 }); }

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

2. Карта Google Maps Api — определяем место и устанавливаем маркер2.1 Определяем место центрирования карты

Давайте покажем на карте расположение Большого Театра. В параметре center мы определяли координаты центрирования карты:

Center: {lat: -34.397, lng: 150.644},

Нам необходимо получить такие координаты для нашего места. Для этого идем в обычную версию Google Maps и правой клавишей кликаем на интересующем нас месте. Нажимаем «Что здесь» и получаем координаты места. (55.760186, 37.618711). Заодно и изменю масштаб, установив его на 18: zoom: 18 .

2.2 Устанавливаем маркер

Место определили. Осталось показать маркер на карте. Внутри функции initMap() добавляем переменную для маркера:

// Создаем маркер на карте var marker = new google.maps.Marker({ // Определяем позицию маркера position: {lat: 55.760186, lng: 37.618711}, // Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты) map: map, // Пишем название маркера - появится если навести на него курсор и немного подождать title: "Наш маркер: Большой театр" });

Теперь у нас есть карта с маркером

Как добавить событие по клику на карту или маркер в Google Maps

Также на клик по маркеру можно добавить свое событие. В итоговом коде страницы мы это делать не будем. Но делается это вот так:

Google.maps.event.addListener(marker, "click", function() { document.location="http://google.com"; });

Первый параметр метода addListener - это объект, для которого добавляется событие, в нашем случае marker . Объектом может выступать не только маркер но и сама карта. Второй параметр click определяет тип события, в данном случае один щелчок. Третий — функция обработчик, которая сработает.

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

2.3 Установка собственной иконки для маркера в Google Maps

Маркер установили. Но он стандартный, и это совсем не интересно. Давайте заменим его на свою иконку. Я нашел одну подходящую иконку которую мы будем использовать.

В описание переменной с маркером, добавлю иконку.

// Создаем маркер на карте var marker = new google.maps.Marker({ // Определяем позицию маркера position: {lat: 55.760186, lng: 37.618711}, // Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты) map: map, // Пишем название маркера - появится если навести на него курсор и немного подождать title: "Наш маркер: Большой театр", // Укажем свою иконку для маркера icon: "theatre_icon.png" });

Про более сложные значки — можно посмотреть в документации .

3. Задаем свои стили оформления для карты Google Maps

Пришло время раскрасить нашу карту. Придать ей особый и неповторимый вид. Делать мы это будем с помощью сервиса Snazzy Maps который имеет большое количество скинов для Google карт. И позволяет делать вот такие крутые карты:

Я выбрал стиль карты который называется Blue water . На странице данного стиля можно найти код для оформления и скачать файл с примером — применения такого стилевого оформления к карте Google Maps.

Стили для оформления карты добавляем в свойство styles которое мы указываем для переменной map — когда создаем в ней объект с картой.

Привожу весь фрагмент кода:

// В переменной map создаем объект карты GoogleMaps map = new google.maps.Map(document.getElementById("map"), { // При создании объекта карты необходимо указать его свойства // center - определяем точку на которой карта будет центрироваться center: {lat: 55.760186, lng: 37.618711}, // zoom - определяет масштаб. 0 - видно всю платнеу. 18 - видно дома и улицы города. zoom: 18, // Добавляем свои стили для отображения карты styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}] });

Теперь наша карта выглядит вот так:

4. Информационные окна

Карту можно еще улучшить, добавив информационное окно по клику на наш маркер. Документация по ним лежит . Если вкратце, то чтобы добавить инфо окно необходимо:

Создать само окно и контент внутри него

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

Все это происходит внутри функции initMap()

4.1 Опишем контент инфо-окна: // Создаем наполнение для информационного окна var contentString = ""+ ""+ ""+ "Большой театр"+ ""+ "

Госуда́рственный академи́ческий Большо́й теа́тр Росси́и, или просто Большой театр - один из крупнейших" + "в России и один из самых значительных в мире театров оперы и балета.

"+ "

Веб-сайт: bolshoi.ru"+ "

"+ ""+ ""; 4.2 Создадим инфо-окно // Создаем информационное окно var infowindow = new google.maps.InfoWindow({ content: contentString, maxWidth: 400 }); 4.3 Делаем так чтобы по клику на маркер — появлялось инфо-окно // Создаем прослушивание, по клику на маркер - открыть инфо-окно infowindow marker.addListener("click", function() { infowindow.open(map, marker); });

Теперь карта с инфо-окном выглядит следующим образом:

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

Готовая карта

Готовую получившуюся карту и код можно посмотреть ниже или на codepen .

Алексей Черницын

небольшое уточнение:
1-2 недели - для получения кода верификации по физической почте - это почти фантастика, к сожалению. Последние 2 раза, которые лично я регистрировал компанию в Google.Business - заняли 1,5-2 месяца. При этом интересная особенность - Письмо от Google пришло из Франции.
Т.е. не так все быстро и просто, как хотелось бы.

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

Уточните для меня пожалуйста:)
- о каком справочнике идет речь? Если я верно помню, то Гугл Бизнес индивидуален и не является катологом/справочником.
- думаю логично, перед добавлением и созданием новых профилей на любом ресурсе, стоит проверить нет ли его уже там, и проблем не будет) Но в случае с профилем Гугл Бизнес - да, если уже кто-то забрал ваш профиль, то велкам ту тех.поддержка и передача прав.

Мухамед-Канапия Жаксылык

Ну не знаю пока этим инструментом у нас в Казахстне не особо пользуются, но не я. Лично сильно удивился когда код верификации к нам в Астану за полторы недели приехал. А так у моего бизнеса есть баги, например кнопки в записях текст в поиске выводит иногда другой чем то который я задавал

Название страницы: Как быстро добавить.... Что она имеет общего с изложенным материалом, где попросто банальнейшая инструкция и не единого совета, как действительно это сделать быстро!

Алексей Черницын

)) что именно уточнить? Почему я назвал ГуглБизнес "каталогом" и "справочником"? Ну, потому, что это действительно так по сути. По выдаче гугл, как и яндекс выдают (стараются) выдавать персонализированные результаты. Но когда речь идет о брендовых запросах - обычно выдают всегда из ГуглБизнес карточку.
Так что "каталог" и "справочник")) не хотите - так не называйте))
и согласен, что перед добавлением нужно было бы проверить. И да, передачу прав никто не отменял. В моем случае была просто личная невнимательность - получил ссылку на аккаунт от заказчика, но не перепроверил. А оказалось, что это уже второй который они же создали, т.к. до первого не достучались.

Ну ок) думал что может что-то изменилось и я пропустил это)

Анатолий Шпиц

В последнее время письма вообще не идут на московские адреса, а вот на украинские идут, наверняка проделки госдепа и тайного заговора;)
Приходится подтверждать страницу и адрес через почту домена (когда попытки почты заканчиваются), и то бывает не с первой попытки это работает =)

А куда придет письмо с номером если указывается только дом?

"Через почту домена " Можно поподробнее как ето?

Елена Владимировна Краева

Алексей, благодарю за уточнение по срокам. Видимо, Гуглу не всегда удается соблюсти установленные сроки.

Елена Владимировна Краева

Вот официальное видео от Google Бизнес о том, как правильно указывать адрес https://www.youtube.com/wat...

Елена Владимировна Краева

Вот ссылка на официальное видео от "Гугл для Бизнеса (Россия)", в котором описаны способы ускорения получения подтверждения, а именно: написать в техподдержку, если письмо не пришло в течение 1-2 недель (вот ссылка на страницу отправки запроса в тех поддержку
Для некоторых (не для всех) компаний, кроме подтверждения по почте, доступны опции подтверждения по телефону или электронной почте. Вот ссылка на инструкцию от Гугл подтверждения по телефону и по почте: https://support.google.com/... .
Ссылка на видео

Доброго дня всем читателям. Google maps или говоря по русски — гугл карты, давно стали популярнейшим инструментом для миллионов пользователей. Не буду сейчас перечислять все достоинства этого замечательного проекта. Вы и сами знаете. Интерактивные гугл карты на страницах типа «О нас» или «Как добраться?» уже давно стали необходимыми атрибутом на любом корпоративном сайте или тем более, сайте с магазином. Давайте поговорим о том, как эти карты удобнее вставить на WordPress сайт.

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

Как вставить Google Maps с помощью ручной вставки кода

Топаем на сами карты от Гугла и находим нужное вам географическое место. С некоторых пор карты стали иметь совсем минималистичный интерфейс для удобства просмотра. Нам же нужен классический вариант. Жмем кнопку справа вверху браузера — «Справка и отзывы» и затем — «Классический интерфейс».

Слева появится своеобразный сайдбар, где нам нужна кнопка «Сссылка». Нажимаем её и появляется окошко с двумя полями:

Короткий код (для быстрой отправки ссылки на вашу карту).

HTML-код для добавления на веб-сайт

Внизу есть еще ссылка — «Настройка и предварительный просмотр встроенной карты». Кликаем на неё и попадаем в всплывающее окно тонкой настройки представления нашей карты. Тут можно отрегулировать масштаб отображения карты, размер окна для показа карты и скопировать нужный код из нижнего поля на свой сайт. При этом, если вы внимательно присмотритесь, то увидите как в этом поле будут меняться цифры во время изменения настроек отображения карты.

Перейдите в ваш WordPress сайт и вставьте код в публикации, страницы или шаблон. Вот и все. Осталось только сохранить свой пост или страницу и увидеть как карты Google «поселятся» на вашем сайте.

Как вставить Google Maps с помощью плагина

Первый способ хорош, если вы только хотите встроить карту гугл в одном месте WordPress сайта. Но если карты играют важную роль на вашем сайте и в основном содержании вам требуется часто добавлять карты в ваших постах, то я рекомендую использовать специальный WordPress плагин — . После установки и активации идем в любую вашу запись и прокручиваем вниз до метабокса MapPress . Тут нужно создать новую карту — New Map .

Вводим название нашей карты, выбираем размер. В поле Add POI: вводим названия или координаты для поиска нужного места. Кстати, можно таким образом добавить несколько мест на одну карту. В отдельном окне задайте свои описания. Сохраняем и для вставки на страницу жмем Insett Into Post.

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

Google Maps в ваших виджетах с эффектом Lightbox

Еще один очень простой и эффектный способ добавить гугл карту на ваш сайт это использование плагина . После установки и активации плагин даст возможность использовать новый виджет с одноименным названием.

Переходим к своим виджетам. Перетаскиваем новый виджет Google Maps Widget в нужное вам «виджетоместо». Например, в сайдбар. Вводим название требуемого населенного пункта и страну. Указываем уровень зума. Кроме показа карты в сайдбаре, еще есть возможность по клику разворачивать карту с помощью эффекта . Соответственно, внутри виджета есть еще две закладки с дополнительными настройками — для сайдбара и для развернутого вида.

Премиум плагин — 5sec Google Maps

Для тех кто предпочитает премиум плагины, хочет «все в одном» и привык всегда иметь великолепную поддержку от автора, могу порекомендовать прикупить популярный плагин — .

За свои 10 баксов плагин умеет следущее:

• Не требует API, никакой установки, без редактирования кода
• Работает в сайдбаре, записях, страницах и вообще везде прямо » из коробки»
• Поддержка полноэкранного режима.
• Используемый по умолчанию код, , могжет быть легко изменен.
• Несколько карт для каждой записи/страницы.
• 12 предопределенных маркеров/иконок
• Полностью настраиваемое HTML описание
• Использует локальный кэш для геокодирования (адрес lat/СПГ mapping) для максимальной скорости
• Обширная документация с примерами

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

Надеюсь, данная статья поможет вам выбрать нужный именно вам вариант для вставки любых необходимых Google Maps на ваш WordPress сайт.

От автора: приветствую вас, друзья. Из этой небольшой статьи вы узнаете, как вставить карту Гугл на сайт WordPress. Google карта это очень удобная штука, поскольку позволяет визуализировать, например, на странице контактов ваш адрес или просто показать какое-либо место на карте.

К слову, если вместо Google карты вы хотите использовать Яндекс карты, то в этом случае можете ознакомиться со статьей .

Итак, давайте приступим к установке и настройке Google Sitemap, то бишь Гугл карты. Здесь мы рассмотрим два способа добавления карты: попроще и чуточку посложнее. Начнем с простейшего варианта, по результатам которого мы получим карту в виде статической картинки. Для его реализации нам даже не потребуется обращаться к сервису Google Maps (Google Карты), достаточно лишь узнать и запомнить технику добавления карты.

Итак, для добавления карты нам необходим тег img с примерно таким кодом:

< img src = "//maps.googleapis.com/maps/api/staticmap?center=нужный +адрес&zoom=17&size=600x300 " alt = "" >

Как видим, картинка берется с сервиса Google Maps и к ней добавляются несколько параметров, в частности такие:

center — адрес, который необходимо показать на карте;

zoom — величина увеличения (чем большее число, тем крупнее), максимальное значение — 22;

size — ширина и высота карты.

Давайте попробуем добавить карту к статье. Для этого обязательно перейдите в режим HTML кода (вкладка Текст вверху редактора) и добавьте нужный код.

После этого вполне можете вернуться во вкладку Визуально и, если все сделано верно, мы уже в редакторе сможем увидеть выбранное место на картинке Гугл карты.

Также убедимся в том, что Google карта появилась и на сайте WordPress.

Отлично! Теперь мы научились добавлять и производить необходимую настройку карты Google на сайте. Заметьте, нам не пришлось при этом устанавливать никакого плагина, все можно сделать и без плагина в течение буквально одной минуты.

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

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

Сохраним изменения и проверим, появилась ли Гугл карта на сайте WordPress.

Все получилось. В статье появилась динамическая карта, по которой можно перемещаться. Очень удобно. При этом данный способ не намного сложнее, просто нам дополнительно пришлось обращаться к сервису Google Maps, чтобы найти место и получить код карты.

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

На этом у меня все. Удачи!

карта спутник Гибридный местность

2.5 m 5 m 10 m 20 m 50 m 100 m 200 m 400 m 1 km 2 km 4 km 8 km 15 km 30 km 50 km 100 km 200 km 400 km 1000 km 2000 km

https://сайт/ru/ https://сайт/de/ https://embedgooglemaps..com/ru/ https://embedgooglemaps..com/en/ https://сайт/fr/

Создать свой код

Copied to clipboard

https://iamsterdamcard.it https://iamsterdamcard.it https://iamsterdamcard.it https://iamsterdamcard.it https://iamsterdamcard.it https://iamsterdamcard.it https://iamsterdamcard.it https://iamsterdamcard.it https://iamsterdamcard.it https://iamsterdamcard.it

Код для вставки Google Map , чтобы повысить ценность вашего сайта

Если вы добавите расположение на ваш веб-сайт, то посетителям будет легче запомнить место и найти к нему дорогу. Если вы добавите карту на свой сайт, то посетители определенно лучше запомнят ваше местоположение и смогут легче до вас доберутся. Многие владельцы сайтов интересуются, как вставить Google Maps в Joomla, вот краткое руководство, которое поможет вам добавить карту Google на сайт.

Ниже перечислены шаги, которые помогут вам сделать это очень просто, и успешно добавить карты Google на сайт с нашим генератором Google Maps:

• Выберите адрес, по которому вы хотите, чтобы посетители вас нашли, и добавьте карту расположения на сайт.
• Выберите тип карты: спутниковый, гибрид или местность. Посмотрите внимательно, какой тип лучше подходит именно вам.
• Укажите ширину и высоту, чтобы сделать ее подходящей для вашего сайта.
• После того, как вы закончили с этими настройками, нажмите на кнопку “Сгенерировать мой код” под нашим инструментом. Кроме того, вы можете выбрать полный код, нажав “>> Нажмите здесь – Нажмите Ctrl + C