Создать карту от Гугл на Joomla и получить ключ API GoogleMaps v2 или занимательная картография Отчаянной

Добрый день, уважаемые читатели и гости LediSeo! Вы хорошо ориентируетесь в своем городе, можете найти любой адрес без карты или же все таки иногда используете интерактивные карты для подстраховки? Пользуетесь и особенно в незнакомом городе. Сегодня такие карты местности можно увидеть на многих ресурсах, в том числе и на сайта joomla, посвященных туристическим услугам или же в предоставлении каких либо иных услуг посетителям. Чтобы такая карта появилась у Вас на сайте не стоит себе ломать голову и создавать какие то скрипты, для этого существуют специальные сервисы карт у поисковых систем Яндекса и Google. Такие карты благодаря специальным API функциям имеют огромный функционал, благодаря которому мы можем проложить на карте маршрут, разместить фотографию нашего местоположения, указать маркером наше расположение и так далее. Некоторое время назад я подробно рассказывала как создать на сайте joomla карту от Яндекса, а вот сегодня поговорим об плагине Google Maps для Joomla, благодаря которому можно создать на сайте карту от Гугл и особенностях его настроек. Приготовьтесь к серьезной работе, так как я начинаю занимательную картографию.

Итак, чтобы создать карту от Гугл на сайте на joomla 1.5 нам предстоит серьезно проделать несколько шагов, а именно:

• Установить плагин Google Maps
• Получить API GoogleMaps v2
• Получить координаты нашего местоположения на карте в Гугл
• Создать карту от Google на сайте

Для того чтобы установить плагин Google Maps нам необходимо его скачать с официальной страницы http://joomlacode.org/gf/project/mambot_google1/frs/. На данный момент существует уже версии как под joomla 1.5 так и под 2.5, так как у меня используется версия 1.5 , то естественно я и буду скачивать версию плагина именно под это версию движка.

Получив архив с плагином на жесткий диск, мы производим установку плагина Google Maps на сайт стандартным способом, зайдя в административную панель, где открываем вкладку “Расширение” –” Установить\Удалить” и на открывшейся странице выбираем пункт загрузки “Загрузить файл пакет”.

После того, как плагин был успешно установлен, необходимо его активировать. Чтобы это сделать отправляемся во вкладку “Расширения” — ”Менеджер плагинов” и на открывшейся странице, в списке плагинов, ищем строчку Google Maps

и нажимаем напротив него на красный крестик.

Все плагин Google Maps  активирован, но чтобы создать на сайте карту от Гугл нам необходимо получить API GoogleMaps. Существует две версии  JavaScript API Google Maps – v2 и v3. В чем разница между этими двумя версиями я рассказывать не буду, лучше подробно опишу сам процесс получения  API GoogleMaps, так как я не заметила какой либо существенной разницы в получение. Зато у не знающего человека само получение данного ключа может вызвать затруднения.

Как получить  API GoogleMaps

Чтобы стать счастливым обладателем ключа API GoogleMaps Вам необходимо иметь свой аккаунт на Google, а проще говоря иметь свой почтовый ящик на .gmail.com. Если у Вас такового  еще нет, то первым делом это делаем. Как и где я подробно рассказывала в этой статье.

Будем предполагать, что у Вас аккаунт в Гугл имеется поэтому переходим по адресу https://code.google.com/apis/console

Нажимаем на открывшейся странице по кнопке “Create project..” появляется окно, где нам предлагается ввести свой логин и пароль от нашего аккаунта на Гугл. Водим, нажимаем на кнопку “Войти” попадаем на страницу, где следует найти пункт Google Maps API v2 (стрелочка 1)

и включить данный скрипт, переведя кнопку  (стрелочка 2) при помощи мыши в положение “оn” .  Появляется окно с правилами пользовательского соглашения, ставим галочку, что принимаем и в результате чего получаем API GoogleMaps

Копируем данный API Google Maps и активируем его в административной панели нашего сайта, зайдя во вкладку “Расширения” — ”Менеджер плагинов” ищем строку  ”Google Maps ” и кликаем по ней. В открывшемся окне в разделе “Параметры плагина”

в строке “Google API version”  (стрелочка 1) необходимо указать версию скрипта Google Maps прописав в поле вода – “2.х”, если же Вы получаю ключ от третьей версии, то вместо двойки напишите три.

Затем вставить в поле “Googlemaps API key” (стрелочка 2) полученный нами API ключ и в поле “Google website” (стрелочка 3) указать страну проживания из выпадающего списка.

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

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

{mosmap}

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

width, height – ширина и высота карты, которая будет отражать у Вас на сайте

lat, lon – координаты нашего объекта на карте Гугл Мапс

zoom – на сколько будет происходить увеличение при клике мышкой

zoomNew – если данный параметр имеет значение равное 1, то при двойном нажатии мышью будет происходить центрирование и масштабирование в указанной нами точке. Если данный параметр равен 0, то будет происходить только центрирование.

zoomType – указываем  тип элемента масштабирования (Small — малый или Large — большой, None — отсутствует)

mapType — начальный тип карты, то есть какой вид карта будет иметь вид, когда откроется страница где она размещена (Normal — обычная по умолчанию, Satellite — спутник, Hybrid — гибридное, Terrain -ландшафт )

showMaptype — начальный тип карты (Normal — обычная по умолчанию, Satellite — спутник, Hybrid — гибридное, Terrain -ландшафт )

overview — показывать или нет обзорную карту (1 — показывать, 0 — нет)

text — текст для маркера в балуне. Данный текст может иметь вид ссылки, чтобы это сделать необходимо добавить вот такую форму <a href=’необходимый url’  target=’_blank’ title=’титл’>анкор</a> Двойные кавычки использовать нельзя!

tooltip — использовать Tooltip, когда мышь наводиться на маркер

marker — открывать или нет информационное окно для маркера на начальном этапе загрузки карты (1- открывать, 0 — нет)

icon — для задания пути (url) к файлу изображения пользовательской иконки

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

Получение координат с Гугл Мапс

Чтобы получить координаты необходимого нам местоположения в Гугл Мапс проходим по ссылке  http://www.maps.google.com/ и на открывшейся странице в поле ввода прописываем адрес,

например, Ленинградская область, Тосненьский район, город Никольское, ул Петрова. Нажимаем на клавиатуре Enter,  на карте отражается необходимый нам город и объект. Далее нам необходимо обозначить балуном точное наше местонахождение, а для этого нажимаем на кнопку “Мои места”(стрелочка 1)

а затем сразу же на кнопку “Создать карту” (стрелочка 2) Страница немного меняется, появляются дополнительные кнопки и окна

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

где следует прописать название данного места, а также его описание. Нажимаем на кнопку “Ок”(стрелочка 1) Затем, чтобы получить координаты места, где мы установили балун нажимаем на кнопку “Готово” (стрелочка 2) и затем по значку получения ссылки (стрелочка 3). Всплывает новое диалоговое окно, содержащее необходимые нам данные в виде ссылке

Копируем данную ссылку в текстовый файл, чтобы извлечь из нее координаты нашего места. Данная ссылка, может иметь вот такой вид:
https://maps.google.com/maps/ms?msid=209408516664347094655.0004c98fa8f5cd7fc8250&msa=0&ll=59.70608,30.819719

&spn=0.003334,0.010632&iwloc=0004c98fac8b483edb76c
Красным цветом, я специально выделила интересующие меня данные. Первое значение – 59.70608 – это у нас параметр lon,  а 30.819719 это lat, которые нам необходимы для создания карты от Гугл на сайте. Теперь нам только остается сгенерировать вывод на сайте.

Создать карту от Google на сайте

Заходим в административную панель сайта, открываем на редактирование материал, где хотим разместить карту Гугл или идем в Расширения и выбираем модуль произвольного html  кода.Неважно, что Вы выберите, наша карта будет отражаться везде.

В визуальном режиме редактирования прописываем код {mosmap} с необходимыми нам параметрами. Например:

1

{mosmap width='640'|height='400'| lat='59.705582'|lon='30.820513'|zoom='14'|text='Здесь находится Петровлен'|tooltip='Здесь находится Петровлен'|marker='1'}

Сохраняем произведенные изменения и открываем наш сайт и смотрим какой вид будет иметь созданная карта Гугл

Если же мы пропишем вот такой код

1

{mosmap width='640'|height='400'| lat='59.705582'|lon='30.820513'|zoom='14'|text=’Никольское'|img src="http://petrovlen.ru/images/stories/petrovlen.jpg" alt="" width="200" height="138"| Петровлен}

и сохраним изменения, то наша карта уже примет совсем другой вид

Получить какие то иные эффекты на карте от Гугл можно с помощью параметров кода , полное описание которых и атрибуты  их вывода находятся вот на этой странице вместе с демо версиями  http://tech.reumer.net/Google-Maps/Demo-Google-Maps/

Ну вот, пожалуй и все что я сегодня хотела рассказать. Теперь и Вы без особых проблем можете у себя на сайте Joomla  создать карту от Гугл. Сделать это просто как видите, необходима простая внимательность и ловкость рук.

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

С уважением, Отчаянная.

Вам понравилась статья? Расскажите о ней друзьям!