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

Частенько стала слышать вопрос: как вставить в статью  сайта карту Google? Давайте попробуем решить это уже сегодня, рассмотрев два варианта установочного действа.

Первый вариант займёт у нас пару-тройку минут, и за это время мы пройдём несколько коротеньких шагов:

Шаг 1. Открываем сайт http://maps.google.com/

Шаг 2. В поисковой строке пишем нужный нам адрес. Я написала адрес Музея истории своего Павловска: Pavlovsk Gospitalnaya Street 16. Писать можно было и по-русски, но мне приспичило заодно проверить, как реагирует Гугл на варианты написания запроса. Оказалось, нормально реагирует, "по-нашему":

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

Шаг 3. Жмём теперь на кнопочку, означающую линк, после чего нам откроется  два окошка с кодами. Выбираем второе - "HTML-код для добавления на веб-сайт" :

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

Шаг 4. Копируем полностью код из этого окошка. Свой код я перенесла в Блокнот, где он оказался таким:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=ru&amp;geocode=&amp;q=+Pavlovsk+Gospitalnaya+Street+16&amp;aq=&amp;sll=59.683619,30.442778&amp;sspn=0.011914,0.027595&amp;ie=UTF8&amp;hq=&amp;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&amp;ll=59.683861,30.444081&amp;spn=0.005957,0.013797&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=ru&amp;geocode=&amp;q=+Pavlovsk+Gospitalnaya+Street+16&amp;aq=&amp;sll=59.683619,30.442778&amp;sspn=0.011914,0.027595&amp;ie=UTF8&amp;hq=&amp;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&amp;ll=59.683861,30.444081&amp;spn=0.005957,0.013797&amp;t=m&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">Просмотреть увеличенную карту</a></small>

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

Теперь этот код надо вставить в статью. Прежде, чем перейти к следующему шагу, хочу сделать небольшое напутствие: я проводила эксперименты с кодом и на Joomla 1.5, и на Joomla 2.5. В первом случае мой редактор JCE легко принял вставку кода через html-ную часть, включенную кнопкой Show/Hide. Во втором случае тот же редактор, только уже с кнопкой [Toggle Editor] в верхнем левом углу панели урезал код, и эксперимент не получался. Если у вас будет происходить то же самое, то тогда делаем следующее: открываем в админке Общие настройки>>Сайт и делаем редактором сайта по умолчанию "Редактор-Без редактора" (Editor-No editor) :
Как поставить на сайт карту Google :: ...

Сохраним настройки, и перейдём к следующему шагу:

Шаг 5. Открываем в админке Менеджер материалов и приступаем к созданию новой статьи, назвав её, например, "Как нас найти".

Если ваш визуальный редактор не урезает код, то тогда, чтобы код работал правильно, надо вставить его не в лицевую, а в html-ную часть редактора. При переключении на лицевую панель редактора вы увидите в его поле появившееся окошко, что означает: мы идём правильным путём. Сохраняем статью и переходим в лицевую панель сайта, чтобы посмотреть, как будет смотреться только что встроенная нами карта Google. У меня получилось вот так:

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

Данное изображение можно как увеличивать, так и уменьшать. Делается это прямо в коде, вот в этом месте:
iframe width="425" height="350" .

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

Надеюсь, никаких затруднений  первый вариант установки карты Google на свой сайт у вас не вызвал.

Второй вариант более симпатичный. Я корпела над ним два дня, поседела окончательно, но всё-таки сочинила код, с помощью которого карта Google выводится посетителям сайта в лайтбоксе через плагины Rokbox, т.е. вот так:

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

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

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

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

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

Как поставить на сайт карты Google с помощью плагинов Rokbox? - см. в отдельном уроке.

 


Похожие статьи:
Читайте также:
Ещё статьи:

 
ВХОД на сайт



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

 

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

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

Мы вконтакте

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

Контакты





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