Код карты гугл. Делаем так чтобы по клику на маркер — появлялось инфо-окно. Опишем контент инфо-окна

От автора: приветствую вас, друзья. Из этой небольшой статьи вы узнаете, как вставить карту Гугл на сайт 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 карту, тогда познакомьтесь с нашим .

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

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

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

В этой статье мы рассмотрим два простых способа, как за пару минут добавить карты 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 могут добавлять свои уникальные пользовательские стили для того, чтобы такая карта от гугл выглядела красиво на вашем сайте.

Всем привет! Сегодня мы научимся не только устанавливать карту Google Maps на свой сайт (любую 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 был отдельным сервисом, то сейчас он является частью уже этого общего сервиса, который объединяет в себе основные инструменты для продвижения компаний.
Сервис «Google Мой бизнес» будет полезен всем владельцам сайтов, которые предоставляют какие-либо услуги или товары. Если у вас есть офис, филиал или магазин, присутствие вашего сайта на картах Google будет дополнительным преимуществом перед конкурентами. К тому же Гугл Карты позволят привлечь дополнительный трафик по региональным запросам (т.е. привязанным к какому-то городу).

Преимущества сервиса «Google Мой бизнес»:

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

Регистрация в GOOGLE MAPS

Для регистрации в Гугл Картах вам нужно сначала создать аккаунт в сервисе «Google Мой бизнес» (для регистрации перейдите по ссылке http://www.google.com/intl/ru/business/). Если у вас уже есть аккаунт в Google (например, почта GMAIL), тогда нажмите «Войти ».
Затем перейдите по ссылке https://www.google.com/local/manage/ . Здесь вы можете добавить один (или несколько) ваших филиалов, т.е. реальные адреса офисов, магазинов и т.п. Эти адреса, впоследствии, и будут выводиться при поиске, и в Google Maps.
Нажмите «Добавить филиал » и заполните всю контактную информацию о компании.

После заполнения всех полей формы, нажмите «Создать ».
Теперь, чтобы сервис заработал и ваша компания появилась в поиске, нужно подтвердить указанный в форме адрес.
Подтверждение адреса осуществляется только через отправку почтового письма, с кодом активации внутри. Ранее была возможность получить код и через СМС, но сейчас активация происходит только так.
В компании Google утверждают, что письмо будет добираться около 2 недель, а сам код будет действителен только в течение 30 дней. Поэтому запаситесь терпением и ждите. После активации координаты компании будут добавлены на карты Гугл.

Что влияет на ваши позиции в Google Maps

• Наличие у компании сайта;
• Полнота информации при регистрации компании (телефоны, e-mail, фото, режим работы, правильно выбранная категория);
• Наличие ключевых слов в названии компании (например, Школа танцев «Медведь», где «школа танцев » — ключевое слово);
• Удаленность от центра города (компания, которая расположена ближе к центру города, имеет больше преимуществ);
• Упоминания о вашей компании на других авторитетных сайтах.

Очень важное влияние на ваш рейтинг в поиске будут также оказывать положительные отзывы о компании. Чем больше у вашей компании положительных отзывов и оценок – тем выше она будет в результатах поиска. Учтите, что отзывы клиенты смогут добавлять только после того, как вы подтвердите адрес компании.
Не рекомендуется «накручивать» отзывы – т.е. самому писать о себе хвалебные опусы. Намного лучший эффект вы получите, если будете стимулировать своих клиентов самим оставлять отзывы о вашей компании.

Дополнительный трюк : добавление координат компании в Google Earth.
Чтобы это провернуть, создайте в корне сайта файл с расширением .kml , в котором укажите координаты компании (долгота и широта). Затем подключите этот файл через sitemap.xml , добавив строчку http://yoursite.com/file.kml .

Все указанные действия увеличат ваши шансы на попадание в ТОП локального поиска и привлечение дополнительного трафика.