Вставить карту гугл в контакте. Как добавить организацию на карты Google (Google Places)

Всем привет! Сегодня мы научимся не только устанавливать карту 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 .

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

Добавить интерактивную карту на свой сайт позволяет, например, всемирно известная поисковая система Google. Сделать это можно с помощью бесплатного сервиса Google Maps .

Шаг 1. Получить код для установки карты Google на сайте

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

Когда отметка на карте установлена, нажмите на значок меню рядом со строкой поиска.

В открывшемся списке меню выберите пункт «Ссылка/код».

В открывшемся окошке перейдите во вкладку «Код», выберите размер карты и скопируйте предложенный html-код.

Шаг 2. Как вставить код карты 2gis на сайт

Итак, код получен, осталось только разместить его на нужной странице сайта. Мы решили добавить карту в раздел «Контакты». Заходим в админку «Нубекса», на панели управления выбираем раздел «Страницы» , находим в списке нужный раздел и нажмимаем «Редактировать» .

Работать будем с текстовым блоком. Нажимаем кнопку «Источник» , чтобы перейти в режим редактирования кода. Вставляем в текстовое поле код, полученный на GoogleMaps, и сохраняем изменения.

Заходим на страницу «Контакты» нашего сайта и радуемся обновлениям!

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

Кроме карт от Google, вы так же можете разместить на сайте карты от и 2gis , о них мы расскажем в соответствующих статьях.

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

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

В этой статье мы рассмотрим два простых способа, как за пару минут добавить карты Google Maps на сайт:

• 1. Непосредственно вставить из Google Maps
• 2. Плагин Google Maps от WPMUDEV

Метод вставки на WordPress сайт карт из Google Maps

Откройте Google Maps и введите в поисковую строку адрес. Например, мы ввели случайный запрос «Тверской район, Москва, дом 1,» выбрали здание кафе, и вот что получили:

В верхнем левом углу картинки можно нажать на картинку в виде звена цепи, и открыть диалоговое окно для вставки карты на сайт. Вы можете настроить некоторые элементы (такие как размер карты, цвет границ и т.д). Скопируйте этот код и вставьте его на свой сайт, используя HTML-редактор на странице записи.

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

Плагин Google Maps

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

Вместо того чтобы копировать код из google, вы можете вставить карты непосредственно из вашей записи или страницы, используя иконку «Добавить карту» в визуальном редакторе. Вы можете использовать пользовательские разделы для взаимодействия с геолокационным плагином, даже добавлять на карту панорамное изображение.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Недавно я писал статью как добавить свою организацию на Яндекс карты, детальнее читайте: “ ”. Сегодня же пришло время посмотреть как можно добавить организацию на карты Google в Google Places (Гугл места) . Многие подумают зачем, мне добавлять свой сайт в данный сервис, у меня и так все хорошо. Возможно хорошо но может быть еще лучше.

Для чего нужны Google Places (Гугл места)

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

• картинки,
• видео
• новости
• по региональным запросам Google карты, на которых находятся специальные метки.

Если Вы введете в поисковую строку региональный запрос “натяжные потолки в Киеве ” или “рестораны в Москве ”, то увидите слева карту и в выдаче дополнительные 7 позиций, которые формируются из организаций, которые пользователи добавляют в Google Places.

Вот как получить такую метку мы сегодня и будет разбираться.

Плюсы добавления организации на карту

Я уже довольно таки давно тестирую на разных клиентских ресурсах и могут сказать, что по региональным запросам:

• идет увеличение получения трафика ;
• увеличивается узнаваемость бренда ;
• увеличивается скорость нахождения фирмы. Даже если пользователь не переходит на сайт, он может просто позвонить по указанному телефону.

Пошаговое руководство добавления организации в Google Places

Для начала необходимо завести себе почту gmail, у кого она уже есть, необходимо авторизоваться. После того, как успешно авторизовались, необходимо перейти по ссылке:

В строке поиска вводим название вашей компании и нажимаем “Поиск ”, возможно кто-то уже добавлял ее ранее. Если компании нету, то в появившемся окне необходимо выбрать пункт “Ввести данные о компании полностью ”.

Теперь необходимо заполнить все пункты, они обязательные. Проблемы могут быть с категорией, которую нужно выбрать из списка и после нажать кнопку “Отправить ”.

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

Все теперь появится окно в котором необходимо выбрать пункт “Отложить проверку и продолжить ”.

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

• описания;
• картинки;
• видео (как сделать видео для YouTube можете прочитать в статье: « «)
• адреса;
• логотип;
• телефоны

Что бы подтвердить отображение компании на карте, необходимо на странице компании сверху найти кнопку “Подтвердить ”. При нажатии на нее следовать всем указанным шагам. Подтверждение производится под средством получения письма на почту в котором находится PIN — код , который необходимо ввести на той же странице компании сверху при нажатии на кнопку “Введите код ”.

Я уже говорил в начале, что используя Google Places, по региональным запросам можно получить хороший дополнительный трафик. Что бы попасть в ТОП необходимо правильно оптимизировать страницу компании, для этого нужно:

• в названии компании указывать ключевое слово например: “ ”;
• правильно выбрать категорию, в которую тоже будут входить ключевые слова;
• получать как можно больше отзывов;
• заполнить всю необходимую информацию;
• добавить , плюсом так же будет добавление видео.
• добавить логотип для узнаваемости бренда.

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

После всех проделанных шагов и заполнения страницы компании, необходимо ждать, как правило письмо с PIN — кодом должно прийти в течении 1-2 недель. После подтверждения страницы, заявка еще будет рассматриваться и отметка не сразу появится на Картах Гугл. Данная процедура может занять от 1-2 недель, до нескольких месяцев. Тут главное терпение.

Используйте Google Places для своих целей, повышайте количество трафика и продаж на своем сайте.