gototopgototop
Register
Вход
HomeКак это сделать?... /  Как показать карту Google в лайтбоксе
Как показать карту Google в лайтбоксе E-mail
Повышаем мастерство - Как сделать?...
Автор: Наталья Мельниченко   
14.12.2012 09:59

Самый простой способ установки карты Google на свой сайт мы рассмотрели в предыдущей части урока под названием "Как поставить на сайт карту Google".

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

Итак, приступим.

Шаг 1. Открыв maps.google.com, вписываем в адресную строку нужный нам адрес.

Как я уже говорила в предыдущем уроке, я вписала в строку адрес Музея города Павловска, а сама запись выглядела  в поисковой строчке так: Pavlovsk Gospitalnaya Street 16 :

Как поставить на сайт карту Google :: ...

Шаг 2. Нажимаем на кнопку с линком. В появившемся окошке в предыдущем варианте установки мы копировали "HTML-код для добавления на веб-сайт":

Как поставить на сайт карту Google :: ...

На этот раз нам надо скопировать код, данный в строчке выше красной рамки и подсвеченный на картинке синим цветом.

Этот код тоже немаленький, и в Блокноте выглядит так:

https://maps.google.com/maps?q=+Pavlovsk+Gospitalnaya+Street+16&;hl=ru&ie=UTF8&ll=59.684295,30.444081&spn=0.005957,0.013797&sll=59.683619,30.442778&sspn=0.011914,0.027595&hnear=%D0%93%D0%BE%D1%81%D0%BF%D0%B8%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F+%D1%83%D0%BB.,+16,+%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D1%8F,+196620&t=m&z=17&iwloc=A

Ниже я даю формулу, скопировав которую, вы можете в дальнейшем подстраивать её под свои нужды.

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


1) через текстовую ссылку:

Музей истории г.Павловска на карте

Код  текстовой ссылки (скопируйте отсюда и подставьте  вместо выделенных мною цветом  необходимые данные из СВОЕГО кода. Не забудьте только о том, что пробелы после первой  и перед  последней фигурными скобками следует убрать, иначе в лицевой панели сайта  для посетителей отразится не ссылка или картинка, а всего лишь непонятная для них абракадабра. Пробелов не должно быть и в самом коде):

{ rokbox size=|840 600| text=|Музей истории г.Павловска на карте|}http://maps.google.com/maps?f=q&source=s_q&hl=ru&geocode=&q=+Pavlovsk+Gospitalnaya+Street+16&sll=59.683619,30.442778&sspn=0.011914,0.027595&ie=UTF8&z=17&iwloc=A&output=embed{/rokbox }

2) через картинку:

Музей истории г. Павловска на карте ::Павловск

Код  "картинного" варианта:

{ rokbox title=|Музей истории г. Павловска на карте :: Павловск| size=|700 450| thumb=|images/rokbox/google_thumb.jpg|}http://maps.google.com/maps?f=q&source=s_q&hl=ru&geocode=&q=+Pavlovsk+Gospitalnaya+Street+16&sll=59.683619,30.442778&sspn=0.011914,0.027595&ie=UTF8&z=17&iwloc=A&output=embed{/rokbox }

Вот и вся премудрость. Желаю благополучно ею овладеть!

 
ВХОД на сайт



Базовый курс создания сайта

Предисловия к Базовому курсу

Установка и настройка Joomla!

Работа с расширениями Joomla!

2011-03-11-22-16-12Работа со статьями

Создание меню

Работа с хостингом

Безопасность сайта

Ссылки для скачиваний

 

Есть ли народ на сайте?

Сейчас 34 гостей онлайн

Мы вконтакте

Как сделать?...

Контакты





Copyright © 2011. Joomla! для "чайников". Автор сайта Наталья Мельниченко
Follow us on Twitter