Как в статье отобразить Google Map

Автор: SG, 10.12.2007 03:00
Просмотров: 5055

Ответ ищите внутри ;) 

Итак, вы решили снабдить свой отчет или статью одним или несколькими окошками с картами Google. Оказывается, сделать это не так уж и сложно.

Шаг 1. Где взять координаты?

Это ключевой вопрос, потому что остальное - дело техники . Существует довольно много способов, например, надыбать карту и посидеть с линейкой, либо съездить с GPS непосредственно на местность, покрутить глобус Google Earth, в конце концов. Однако, одним из самых простых методов является воспользоваться геокодером, например, вот этим. Пользоваться им просто - щелкаете по карте, появляется маркер. Щелкаете по маркеру, выводятся координаты. Не забудьте их запомнить ну, или, на худой конец, записать. Для наших целей координаты нам понадобятся в десятичном формате, типа xx.xxxxxxxxxxxx yy.yyyyyyyyyyyy.

Шаг 2. Готовим карту

Чтобы все сделать красиво, сперва нам понадобится создать html - файлик. Это не сложно, сейчас научу.

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

На эту часть можете вообще внимания не обращать (пока все просто, верно?  )


В первой строчке этого блока задается ширина (width) и высота (height) будущей карты. Ширину лучше всегда оставляйте 100%, в итоге она подстроится автоматом. На остальное внимание не обращайте


Здесь выбираете, что именно отобразится на картинке при загрузке


Здесь опять ничего делать не надо


Здесь надо задать координаты центра карты (красненькие) и зум (последняя красная цифирь).


В данном блоке задаются параметры маркера  (та самая перевернутая капелька на карте) . Из-за того, что наш сайт использует кодировку, отличную от гугловской, комментарий к маркеру (Club в примере) надо заводить на латинице, иначе полезут крякозябры. Данный текст будет отображаться, если потом кликнуть на маркере. Красные циферки, как понимаете, координаты маркера. Как ни странно, в моем примере они совпадают с центром карты  . Собственно, на этом всё. Если хотите показать больше маркеров, копируете этот блок и все циферки 1 (кроме оных в координатах ) меняете на 2 и т.д., как я и сделал в своем примере:

Как видите, в сущности, делать почти ничего не надо - внести тип карты, координаты центра, коммент к маркеру, координаты маркера.

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

Шаг 3. Заливаем получившуюся страничку на сайт

Придумываем файлу какое-нибудь новое имя на латинице (иначе при заливке случится вах), идем на сайт в заливку контента и закачиваем файл  в специально созданную категорию Карты Google Map. Ссылку на закачанный файл копируем (в моем примере http://tourism.bmstu.ru/index.php?option=com_docman&task=docclick&Itemid=31&bid=111&limitstart=0&limit=15).

Шаг 4. Вставляем карту в статью

В редакторе контента заходим на вкладку (таб) html Code, ищем нужное место (в самом простом случае пихайте прямо в самое начало страницы) и вставляем туда следующий кусочек кода, содержащий скопированную на предыдущем шаге ссылку: 

Этот же кусочек кода есть в файле примера, можете скопировать его оттуда.
Параметр align позволяет выровнять карту вправо (right), лево (left), поместить посередине (middle). width задает ширину окна, в которм будет отображаться карта, а height - высоту. Высоту лучше всего задавать как высоту карты, которую вы указали в подготовленном файлике, + 50.

Ну вот и всё. Осталось только добавить, что, пожалуй, не стоит пихать карту в заголовок новости, чтобы не утяжелять главную страницу. Карта довольно много весит и пользователям с узким Интернетом придется несладко...

 

Добавлен: 11 дек 2007 01:06 Автор: zaya #41097
zaya аватар
Вот прокатим в выходные ПВД, и поюзаю новый мега-фрейм для публикации нитки маршрута =)