Статистика сайта мне подсказывает, что этот вопрос интересует посетителей. Интересно, почему, ведь в этом нет ничего сложного. Впрочем, не все могут иметь опыт наступания на грабли в давних версиях библиотеки GD и не приучены оные [грабли] обходить. Требуемые действия не зависят от платформы, будь то Linux, Unix или клоны BSD. Итак, по порядку.
1. Нужно использовать юникодные шрифты. Можно даже виндовые, из XP. Вот такой набор будет достаточным на первое время:
arialbd.ttf
arialbi.ttf
ariali.ttf
arial.ttf
ariblk.ttf
comic.ttf
courbd.ttf
courbi.ttf
couri.ttf
cour.ttf
FreeMonoBoldOblique.ttf
FreeMonoBold.ttf
FreeMonoOblique.ttf
FreeMono.ttf
FreeSansBoldOblique.ttf
FreeSansBold.ttf
FreeSansOblique.ttf
FreeSans.ttf
FreeSerifBoldItalic.ttf
FreeSerifBold.ttf
FreeSerifItalic.ttf
FreeSerif.ttf
symbols.ttf
verdana.ttf
2. Пишем конфигурационный файл для используемых шрифтов (fonts.list):
mono ../fonts/FreeMono.ttf
sans ../fonts/FreeSans.ttf
sansb ../fonts/FreeSansBold.ttf
vera ../fonts/FreeVera.ttf
serif ../fonts/FreeSerif.ttf
arial ../fonts/arial.ttf
arialbd ../fonts/arialbd.ttf
arialblk ../fonts/ariblk.ttf
cour ../fonts/cour.ttf
symbols ../fonts/symbols.ttf
Пути указываются относительно расположения главного файла конфигурации (map-файла).
3. В конфигурационном файле указываем размещение файла конфигурации шрифтов следующей директивой
FONTSET "fonts.list"
4. Необходимо указать кодировку данных, в случае использования ESRI shapefiles это будет cp1251. Для этого конфигурационном файле карты в секцию LABEL нужно добавить директиву ENCODING CP1251.
P.S. Я пользуюсь вот такой структурой каталогов:
$ ls -R
.:
bin fonts maps
./bin:
mapdraw.py
mapinfo.py
./fonts:
arialbd.ttf
arialbi.ttf
ariali.ttf
arial.ttf
ariblk.ttf
comic.ttf
courbd.ttf
courbi.ttf
couri.ttf
cour.ttf
FreeMonoBoldOblique.ttf
FreeMonoBold.ttf
FreeMonoOblique.ttf
FreeMono.ttf
FreeSansBoldOblique.ttf
FreeSansBold.ttf
FreeSansOblique.ttf
FreeSans.ttf
FreeSerifBoldItalic.ttf
FreeSerifBold.ttf
FreeSerifItalic.ttf
FreeSerif.ttf
symbols.ttf
verdana.ttf
./maps:
fonts.list
map_ru_52_nn.map
map_ru_52_nn
symbols.list
В папке map_ru_52_nn располагается карта Нижнего Новгорода в формате шейпфайлов. Как показывает практика, именно шейпфайлы позволяют добиться максимальной производительности. Только не забудьте их проиндексировать!
P.S. По отзывам некоторых пользователей BSD-систем, у них есть проблемы при выводе кириллицы. Честно говоря, удивлен, что такое у них с библиотекой iconv - то ли сильно древняя в системе, то ли сами пользователи лет 5 не обновлялись. В дебиане еще с Sarge все работает, вот в Woody приходилось mapserver со всеми зависимостями пересобирать для нормальной поддержки русского языка, но те времена давно минули. О чем это я - если не хотите лишних проблем на свои [измерить самим] сантиметров, обновите систему для работы с русским языком в картсервере. Где-то у меня скрипты для сборки всех зависимостей валялись, но я ни в коей мере не считаю себя дальновиднее мантейнеров соответствующих пакетов и теперь, когда все работает "из коробки" фигней не страдаю. Ну, если кому интересно, в рассылке пожалуй их могу опубликовать, чем не повод вспомнить и улыбнуться тем временам.
вторник, 31 июля 2007 г.
понедельник, 30 июля 2007 г.
Удивительное рядом: карты Google Maps
Перефразируя известного барда, пришло время сказать: "Удивительное рядом и оно разрешено". И мы предлагаем Вашему вниманию то удивительное, о чем мы забываем в суете дней. Оглянитесь, мир вовсе не скучен и совсем неизведан! Нас с Вами ежедневно подстерегает что-то необычайное, но мы проходим мимо. Так давайте вместе посмотрим вокруг.
Для просмотра соответствующей карты щелкните на картинке.
Ангелы среди нас.
Интересно, это ошибка на карте? Или камера поймала ангела над Манитобой?
Маскировка?
Старая база ВВС Soesterberg хорошо замаскирована ...
Посевы в Сахаре.
Посевы около Тсавы, посреди Сахары. Выглядит немного странно.
Круто покрашено.
Экстремальный пейнтболл!
Призрачные корабли.
Призрачные корабли, созданные странным расположением/выдержкой камеры? Порт Элизабет/Порт Ньюарк, NJ
Призрачная машина.
Машина-призрак ;).
А здесь что?
Почти лунный пейзаж, особенно если приблизить картинку.
Я видел пришельцев ...
НЛО садится на крышу здания в Нидерландах!
Номер 2
"Двойка" посреди озера
"Клоны" самолета.
Самолет вылетевший из аэропорта Rhein-Main-Airport во Франкфурте, Германия (FRA). Самолет видно целых 3 раза, его тень - вообще 4 раза.
Круг в океане
Странный круг в океане. Похоже на кратер вулкана.
Машина-ракета?
В Арканзасе обнаружена ... машина на ракетной тяге! Это не что иное как четырехколесная ракета, ведомая каким-то маньяком по шоссе. Хорошо видно выхлоп ракетного двигатеся позади машины ;).
Посадочная полоса на крыше.
На верхушке этого здания самолет!
Солнечная электростанция.
Невероятная солнечная электростанция в пустыне Мохаве, Калифорния. Изначально задуманная как Solar-1, она была первым широкомасшабным тестом использования солнечной энергии. После добавления второго кольца гелиостатов она стала именоваться Solar-2, содержала 1926 гелиостатов общей площадью 82,750 кв.м. Идея в том, что гелиостаты отслеживают движение солнца и фокусируют его свет в центральную башню, которая сохраняет тепло с помощью расплавленной соли. Мощность станции Solar-2 порядка 10 мегаватт! Solar-2 была списана в 1999 году, и была переделана в Air Cherenkov Telescope в 2001 (телескоп, измеряющий гамма-излучение, попадающее в атмосферу), однако есть проект создания Solar-3 в Испании.
Странный свет
Странное отражение.
Кольцо Всевластия
Саруман обронил его здесь.
НЛО?
Размеры порядка 120 метров!
Продолжение следует...
Автор: Николаев Александр.
Предисловие: Печников Алексей.
Для просмотра соответствующей карты щелкните на картинке.
Ангелы среди нас.
Интересно, это ошибка на карте? Или камера поймала ангела над Манитобой?
Маскировка?
Старая база ВВС Soesterberg хорошо замаскирована ...
Посевы в Сахаре.
Посевы около Тсавы, посреди Сахары. Выглядит немного странно.
Круто покрашено.
Экстремальный пейнтболл!
Призрачные корабли.
Призрачные корабли, созданные странным расположением/выдержкой камеры? Порт Элизабет/Порт Ньюарк, NJ
Призрачная машина.
Машина-призрак ;).
А здесь что?
Почти лунный пейзаж, особенно если приблизить картинку.
Я видел пришельцев ...
НЛО садится на крышу здания в Нидерландах!
Номер 2
"Двойка" посреди озера
"Клоны" самолета.
Самолет вылетевший из аэропорта Rhein-Main-Airport во Франкфурте, Германия (FRA). Самолет видно целых 3 раза, его тень - вообще 4 раза.
Круг в океане
Странный круг в океане. Похоже на кратер вулкана.
Машина-ракета?
В Арканзасе обнаружена ... машина на ракетной тяге! Это не что иное как четырехколесная ракета, ведомая каким-то маньяком по шоссе. Хорошо видно выхлоп ракетного двигатеся позади машины ;).
Посадочная полоса на крыше.
На верхушке этого здания самолет!
Солнечная электростанция.
Невероятная солнечная электростанция в пустыне Мохаве, Калифорния. Изначально задуманная как Solar-1, она была первым широкомасшабным тестом использования солнечной энергии. После добавления второго кольца гелиостатов она стала именоваться Solar-2, содержала 1926 гелиостатов общей площадью 82,750 кв.м. Идея в том, что гелиостаты отслеживают движение солнца и фокусируют его свет в центральную башню, которая сохраняет тепло с помощью расплавленной соли. Мощность станции Solar-2 порядка 10 мегаватт! Solar-2 была списана в 1999 году, и была переделана в Air Cherenkov Telescope в 2001 (телескоп, измеряющий гамма-излучение, попадающее в атмосферу), однако есть проект создания Solar-3 в Испании.
Странный свет
Странное отражение.
Кольцо Всевластия
Саруман обронил его здесь.
НЛО?
Размеры порядка 120 метров!
Продолжение следует...
Автор: Николаев Александр.
Предисловие: Печников Алексей.
суббота, 28 июля 2007 г.
PostGIS GlobeXplorer
GlobeXplorer.
Исходная статья на английском:
http://www.postgis.org/documentation/casestudies/globexplorer/
GlobeXplorer обеспечивает веб-сервисам доступ к изображениям спутниковой и аэрофотосъемки через интернет. GlobeXplorer поддерживает отношения с десятками поставщиков картографической информации и обеспечивает доступ через web к многотерабайтной базе изображений.
Спектр клиентов GlobeXplorer весьма широк - от индивидуальных пользователей, использующих Web Map Server (WMS), до веб-порталов, обслуживающих миллионы обращений за день. Такая высоконагруженное система, хранящая огромное количество данных требует надежного, легко масштабируемого технического решения, позволяющего поддерживать миллионы запросов в день.
GlobXplorer (GX) не хранит в базе данных сами изображения, вместо этого база данных используется для хранения метаданных обо всех доступных изображениях. GX обслуживает запросы следующим образом: сначала посылается запрос в базу для проверки доступности требуемых данных, затем изображения извлекаются из хранилища и отправляются клиенту. Таким образом, каждый запрос изображения вызывает одно или более совпадений с метаданными в базе.
В самом начале, в 1999 году, GX представил свою систему на Oracle 8i, но вскоре обнаружилось, что Oracle не может выдерживать нагрузку, создаваемую GX. Informix предложил перевести систему на их базу данных, используя "Spatial Blade", и к 2001 году система полностью работала на Informix.
GlobeXplorer продолжал расти год от года, привлекая новых клиентов и увеличивая свой архив изображений. В результате их инфраструктура тоже росла и к 2004 году включала в себя Informix, работающий на 11 процессорах, со стоимостью примерно $30,000 за лицензию. Строя планы на будущее, GlobeXplorer обнаружил что дальнейший линейный рост системы не будет экономически оправдан - удвоение емкости может потребовать расходов в полмиллиона долларов.
После ряда исследований в GlobeXplorer остановились на PostGIS в качестве возможной альтернативы Informix и в 2004 году начали проводить ряд тестов. Инженерная группа создала код, позволявший Informix и PostGIS работать параллельно, и команда DBA протестировала параметры настройки. После достижения требуемого быстродействия система была полностью переведена на PostGIS, и к концу 2004 году все рабочие базы данных также перешли на PostGIS.
С тех пор GlobeXplorer продолжил использовать PostGIS, добавляя большое количество векторных данных к информации, доступной клиентам: все дороги США, водоразделы, речные поймы, а также 32 миллиона вспомогательных полигонов. GlobeXplorer обслуживает карты из этих векторных данных используя UMN Mapserver. GX также использует PostGIS для обработки пространственных данных из логов для управления сбором новых данных.
В настоящее время GlobeXplorer обслуживает в среднем 1 миллион запросов к изображениям в день (со случайными пиками в 5 миллионов запросов). Системы подготовки данных и управления контентом тоже используют PostGIS. В настоящий момент ведется работа по переводу биллинговой системы на PostgreSQL.
PostGIS обеспечила GlobeXplorer быстродействие и стабильность не хуже чем их предыдущая система, в то же время позволяя экономично расширять свою инфраструктуру. По мере роста нагрузки на систему GlobeXplorer имеет возможность добавлять новые узлы базы данных без привлечения дорогого программного обеспечения.
"Мы не могли себе позволить использовать коммерческое решение для нужд нашей рабочей базы данных", говорит GlobeXplorer DBA Greg Williamson, "Даже используя меньшее количество более быстрых процессоров, нам все равно пришлось бы заплатить огромную кучу денег."
Продолжая расти, GlobeXplorer накапливает данные, клиентов и новые сервисы, каждый из которых увеличивает требования к их инфраструктуре баз данных. Но независимо от того, что подтребуется в дальнейшем, Williamson говорит, "PostGIS скорее всего будет частью этого."
За дополнительной информацией обращаться:
Greg Williamson
GlobeXplorer LLC
gsw@globexplorer.com
http://www.globexplorer.com
Автор: Николаев Александр.
Исходная статья на английском:
http://www.postgis.org/documentation/casestudies/globexplorer/
GlobeXplorer обеспечивает веб-сервисам доступ к изображениям спутниковой и аэрофотосъемки через интернет. GlobeXplorer поддерживает отношения с десятками поставщиков картографической информации и обеспечивает доступ через web к многотерабайтной базе изображений.
Спектр клиентов GlobeXplorer весьма широк - от индивидуальных пользователей, использующих Web Map Server (WMS), до веб-порталов, обслуживающих миллионы обращений за день. Такая высоконагруженное система, хранящая огромное количество данных требует надежного, легко масштабируемого технического решения, позволяющего поддерживать миллионы запросов в день.
GlobXplorer (GX) не хранит в базе данных сами изображения, вместо этого база данных используется для хранения метаданных обо всех доступных изображениях. GX обслуживает запросы следующим образом: сначала посылается запрос в базу для проверки доступности требуемых данных, затем изображения извлекаются из хранилища и отправляются клиенту. Таким образом, каждый запрос изображения вызывает одно или более совпадений с метаданными в базе.В самом начале, в 1999 году, GX представил свою систему на Oracle 8i, но вскоре обнаружилось, что Oracle не может выдерживать нагрузку, создаваемую GX. Informix предложил перевести систему на их базу данных, используя "Spatial Blade", и к 2001 году система полностью работала на Informix.
GlobeXplorer продолжал расти год от года, привлекая новых клиентов и увеличивая свой архив изображений. В результате их инфраструктура тоже росла и к 2004 году включала в себя Informix, работающий на 11 процессорах, со стоимостью примерно $30,000 за лицензию. Строя планы на будущее, GlobeXplorer обнаружил что дальнейший линейный рост системы не будет экономически оправдан - удвоение емкости может потребовать расходов в полмиллиона долларов.После ряда исследований в GlobeXplorer остановились на PostGIS в качестве возможной альтернативы Informix и в 2004 году начали проводить ряд тестов. Инженерная группа создала код, позволявший Informix и PostGIS работать параллельно, и команда DBA протестировала параметры настройки. После достижения требуемого быстродействия система была полностью переведена на PostGIS, и к концу 2004 году все рабочие базы данных также перешли на PostGIS.
С тех пор GlobeXplorer продолжил использовать PostGIS, добавляя большое количество векторных данных к информации, доступной клиентам: все дороги США, водоразделы, речные поймы, а также 32 миллиона вспомогательных полигонов. GlobeXplorer обслуживает карты из этих векторных данных используя UMN Mapserver. GX также использует PostGIS для обработки пространственных данных из логов для управления сбором новых данных.В настоящее время GlobeXplorer обслуживает в среднем 1 миллион запросов к изображениям в день (со случайными пиками в 5 миллионов запросов). Системы подготовки данных и управления контентом тоже используют PostGIS. В настоящий момент ведется работа по переводу биллинговой системы на PostgreSQL.
PostGIS обеспечила GlobeXplorer быстродействие и стабильность не хуже чем их предыдущая система, в то же время позволяя экономично расширять свою инфраструктуру. По мере роста нагрузки на систему GlobeXplorer имеет возможность добавлять новые узлы базы данных без привлечения дорогого программного обеспечения.
"Мы не могли себе позволить использовать коммерческое решение для нужд нашей рабочей базы данных", говорит GlobeXplorer DBA Greg Williamson, "Даже используя меньшее количество более быстрых процессоров, нам все равно пришлось бы заплатить огромную кучу денег."
Продолжая расти, GlobeXplorer накапливает данные, клиентов и новые сервисы, каждый из которых увеличивает требования к их инфраструктуре баз данных. Но независимо от того, что подтребуется в дальнейшем, Williamson говорит, "PostGIS скорее всего будет частью этого."
За дополнительной информацией обращаться:
Greg Williamson
GlobeXplorer LLC
gsw@globexplorer.com
http://www.globexplorer.com
Автор: Николаев Александр.
Только HTML для создания карт Google Maps. Часть 4. Дополнительные возможности
И в завершение нашего рассказа мы рассмотрим некоторые "продвинутые" возможности.
Всплывающая подсказка при наведении мышки
Начиная с версии GMapEZ 2.2, можно создавать небольшую всплывающую подсказку, которая показывается при проведении мышкой над меткой. Такие подсказки могут содержать только текст, в отличии от окна информации, где можно использовать произвольное HTML содержимое. Для отображения таких подсказок следует добавить атрибут "title" к тэгу <a>:
Примечание: разные браузеры могут отображать созданные указанным методом подсказки по-разному. Например, Opera добавляет слово "Title:" перед текстом подсказки.
Явное указание экстента
В некоторых случаях мы можем пожелать указать начальный масштаб или центр окна просмотра отличными от тех значений, которые автоматически выбираются движком GMapEZ. Для этих целей предусмотрено следующее решение. Зайдите на сайт maps.google.com, укажите желаемые тип и позицию карты, масштаб и проч. Теперь щелкните "Link to this page" и скопируйте полученный адрес URL в тэг <div> наподобии того, как это делалось для метки. Но в этот раз, вместо пустой строки внутри тэга <a>используйте слово EXTENT во всех секциях, аналогично тому, как это сделано в первом тэге <a> следующего примера:
Итак, мы использовали гибридную карту и сделали видимой Канаду, хотя там нет меток. Тип карты, указанный с помощью ссылки типа EXTENT будет определять тип карты, если только мы не переопределим его с помощью класса типа карты, как было рассказано выше.
Дополнительные возможности ссылок
До версии GMapEZ 2.3, ссылки на маркеры могли лишь открывать окна информации и перемещать карту. Теперь добавлен специальный класс ZOOM и ссылки могут также изменять масштаб и тип карты. Например: приблизиться к "4D" или удалиться от "Чикаго":
Cсылка в метке назначения обрабатывается подобно элементу EXTENT. Если метка назначения заключена в тэг <div>, будет открыто окно информации.
Использование нескольких ключей Google Maps API
В некоторых случаях веб-страницы могут быть доступны по разным адресам, например, с localhost для тестирования, с префиксом "www." или без него, и так далее. В таких случаях Google API вызывает головную боль. GMapEZ поможет Вам определить несколько разных ключей для отображения страницы по разным адресам URLs. Основной ключ, используемый по умолчанию, должен быть указан как рассказано ранее.
Чтобы указать дополнительные ключи для разных адресов URL, можно определить части нужных адресов (шаблоны) в атрибуте name. Пример демонстрирует, как можно указать другой ключ для вызова страницы с http://localhost/:
Количество дополнительных ключей не ограничено.
Если строго следовать стандарту, все тэги <meta> и <script> должны располагаться в секции <head> веб-страницы, однако многие браузеры позволяют размещать эти тэги в секции <body> и все отлично работает. Таким образом, необходимо обратить внимание, чтобы все тэги <meta> располагались ранее тэга <script src="...gmapez...">, независимо от местонахождения последнего.
Шаблон адреса задается регулярным выражением. Если Вы не умеете работать с регулярными выражениями, то просто скопируйте начало адреса страницы и в большинстве случаев все будет работать именно так, как нужно.
Рисование линий
Вы можете добавить линии на карту, определив один или несколько секций тэгов <ol> внутри тэга GMapEZ <div>. В каждой секции <ol> укажите список из двух или более точек с помощью уже знакомых нам тэгов меток <a>. Это все, что необходимо сделать, чтобы GMapEZ отобразил ломаную, заданную перечисленными точками вершин. Необходимо убедиться, что веб-страница в тэге <html> содержит атрибут urn:schemas-microsoft-com:vml (см. выше), иначе в браузере IE появится сообщение об ошибке.
Этот пример содержит тэги <li>, которые необходимы только лишь для соответствия стандартному HTML (если Вы не используете валидаторы HTML, можете их убрать). GMapEZ не требует наличия этих тэгов.
Атрибуты тэга class служат для задания цвета, ширины и прозрачности линии и в комментариях не нуждаются.
Примечание: если для точек внутри тэга <ol> не указывать тип метки, то метки отображаться не будут. Если Вы попытаетесь добавить окно информации к одной из несуществующих меток, появится предупреждение GMapEZ. Чтобы создать стандартную метку Google в виде точки, следует указать иконку DOT.
Всплывающая подсказка при наведении мышки
Начиная с версии GMapEZ 2.2, можно создавать небольшую всплывающую подсказку, которая показывается при проведении мышкой над меткой. Такие подсказки могут содержать только текст, в отличии от окна информации, где можно использовать произвольное HTML содержимое. Для отображения таких подсказок следует добавить атрибут "title" к тэгу <a>:
<div class="GMapEZ" style="width: 300px; height: 300px;">
<a title="4D Development" href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
</a>
<a title="New York" href="http://maps.google.com/maps?ll=40.755580,-73.937988&spn=6.276505,5.552490&hl=en">
</a>
<a title="Chicago" href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en">
</a>
<a title="Los Angeles" href="http://maps.google.com/maps?ll=33.916013,-118.179932&spn=6.874500,5.552490&hl=en">
</a>
</div>
Примечание: разные браузеры могут отображать созданные указанным методом подсказки по-разному. Например, Opera добавляет слово "Title:" перед текстом подсказки.
Явное указание экстента
В некоторых случаях мы можем пожелать указать начальный масштаб или центр окна просмотра отличными от тех значений, которые автоматически выбираются движком GMapEZ. Для этих целей предусмотрено следующее решение. Зайдите на сайт maps.google.com, укажите желаемые тип и позицию карты, масштаб и проч. Теперь щелкните "Link to this page" и скопируйте полученный адрес URL в тэг <div> наподобии того, как это делалось для метки. Но в этот раз, вместо пустой строки внутри тэга <a>используйте слово EXTENT во всех секциях, аналогично тому, как это сделано в первом тэге <a> следующего примера:
<div class="GMapEZ GSmallMapControl GSmallMapTypeControl"
style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=51.890054,-98.613281&spn=41.589263,80.239746&t=h&hl=en">
EXTENT
</a>
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
</a>
<a href="http://maps.google.com/maps?ll=40.755580,-73.937988&spn=6.276505,5.552490&hl=en">
</a>
<a href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en">
</a>
<a href="http://maps.google.com/maps?ll=33.916013,-118.179932&spn=6.874500,5.552490&hl=en">
</a>
</div>
Итак, мы использовали гибридную карту и сделали видимой Канаду, хотя там нет меток. Тип карты, указанный с помощью ссылки типа EXTENT будет определять тип карты, если только мы не переопределим его с помощью класса типа карты, как было рассказано выше.
Дополнительные возможности ссылок
<div class="GMapEZ GSmallMapControl GSmallMapTypeControl"
style="width: 300px; height: 300px;">
<a id="hq" href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
A
</a>
<a id="chi" href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en">
C
</a>
</div>
До версии GMapEZ 2.3, ссылки на маркеры могли лишь открывать окна информации и перемещать карту. Теперь добавлен специальный класс ZOOM и ссылки могут также изменять масштаб и тип карты. Например: приблизиться к "4D" или удалиться от "Чикаго":
<a href="#hq" class="ZOOM">Zoom in to 4D</a>
or <a href="#chi" class="ZOOM">Zoom out to Chicago</a>
Cсылка в метке назначения обрабатывается подобно элементу EXTENT. Если метка назначения заключена в тэг <div>, будет открыто окно информации.
Использование нескольких ключей Google Maps API
В некоторых случаях веб-страницы могут быть доступны по разным адресам, например, с localhost для тестирования, с префиксом "www." или без него, и так далее. В таких случаях Google API вызывает головную боль. GMapEZ поможет Вам определить несколько разных ключей для отображения страницы по разным адресам URLs. Основной ключ, используемый по умолчанию, должен быть указан как рассказано ранее.
<meta name="gmapkey" content="abcdefg" />
Чтобы указать дополнительные ключи для разных адресов URL, можно определить части нужных адресов (шаблоны) в атрибуте name. Пример демонстрирует, как можно указать другой ключ для вызова страницы с http://localhost/:
<meta name="gmapkey:localhost" content="hijklmn" />
<meta name="gmapkey" content="abcdefg" />
Количество дополнительных ключей не ограничено.
Если строго следовать стандарту, все тэги <meta> и <script> должны располагаться в секции <head> веб-страницы, однако многие браузеры позволяют размещать эти тэги в секции <body> и все отлично работает. Таким образом, необходимо обратить внимание, чтобы все тэги <meta> располагались ранее тэга <script src="...gmapez...">, независимо от местонахождения последнего.
Шаблон адреса задается регулярным выражением. Если Вы не умеете работать с регулярными выражениями, то просто скопируйте начало адреса страницы и в большинстве случаев все будет работать именно так, как нужно.
Рисование линий
Вы можете добавить линии на карту, определив один или несколько секций тэгов <ol> внутри тэга GMapEZ <div>. В каждой секции <ol> укажите список из двух или более точек с помощью уже знакомых нам тэгов меток <a>. Это все, что необходимо сделать, чтобы GMapEZ отобразил ломаную, заданную перечисленными точками вершин. Необходимо убедиться, что веб-страница в тэге <html> содержит атрибут urn:schemas-microsoft-com:vml (см. выше), иначе в браузере IE появится сообщение об ошибке.
<div class="GMapEZ GSmallMapControl GSmallMapTypeControl G_SATELLITE_TYPE"
style="width: 300px; height: 300px;">
<ol class="color:#00ff00 weight:3 opacity:0.6">
<li><a href="http://maps.google.com/maps?ll=41.564259,-85.852840">
OPEN GREEN START
</a>
<div>Start here</div></li>
<li><a href="http://maps.google.com/maps?ll=41.565314,-85.850486">
</a></li>
<li><a href="http://maps.google.com/maps?ll=41.563443,-85.849449">
ORANGE END
</a>
<div>End here.</div></li>
</ol>
</div>
Этот пример содержит тэги <li>, которые необходимы только лишь для соответствия стандартному HTML (если Вы не используете валидаторы HTML, можете их убрать). GMapEZ не требует наличия этих тэгов.
Атрибуты тэга class служат для задания цвета, ширины и прозрачности линии и в комментариях не нуждаются.
Примечание: если для точек внутри тэга <ol> не указывать тип метки, то метки отображаться не будут. Если Вы попытаетесь добавить окно информации к одной из несуществующих меток, появится предупреждение GMapEZ. Чтобы создать стандартную метку Google в виде точки, следует указать иконку DOT.
Только HTML для создания карт Google Maps. Часть 3. Окно информации
К каждой метке может добавляться всплывающее окно информации, появляющееся после клика пользователя на этой метке. В окне информации может отображаться корректный HTML код и набор вкладок (табов). Одно окно информации может открываться автоматически сразу после загрузки карты, не дожидаясь, когда пользователь щелкнет на соответствующей метке.
Простое окно информации
В каждый тэг <a> можно добавить тэг <div> для указания дополнительной информации для метки. Эта информация должна быть записана в виде корректного HTML, включая изображения, видео и прочие элементы.
Если щелкнуть на любой из созданных меток, появится окно с подробным описанием.
Открывающееся автоматически окно информации
Чтобы окно информации открывалось сразу после загрузки карты, необходимо добавить слово
OPEN внутри тэга <a>. В силу того, что Google Maps может единовременно отображать лишь одно информационное окно, нужно указать только одно автоматически открывающееся окно.
Использование вкладок в окне информации
Если указать более одного тэга <div> внутри метки <a>, в окне информации отобразится по одной вкладке для каждого тэга <div> (впервые реализовано в версии GMapEZ 2.2). Можно задать имя для каждой вкладки, добавив атрибут "title" в тэг <div>:
Открытие окна информации по ссылке
В приведенном примере для каждого тэга <a> указан атрибут id:
Метки "4D Development" и "Chicago" теперь могут быть открыты при щелчке пользователя на ссылке, находящейся в тексте документа:
Начиная с версии 2.3 ссылки на окна информации также могут быть использованы внутри других информационных окон. Так сделана ссылка "see also" в метке "4D Development" этого примера.
Продолжение следует.
Простое окно информации
В каждый тэг <a> можно добавить тэг <div> для указания дополнительной информации для метки. Эта информация должна быть записана в виде корректного HTML, включая изображения, видео и прочие элементы.
Если щелкнуть на любой из созданных меток, появится окно с подробным описанием.
<div class="GMapEZ GSmallMapControl GSmallMapTypeControl"
style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
A
</a>
<div>
4D Development<br />
World Headquarters<br />
Fort Wayne, Indiana
</div>
<a href="http://maps.google.com/maps?ll=40.755580,-73.937988&spn=6.276505,5.552490&hl=en">
B
</a>
<div>New York</div>
<a href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en">
C
</a>
<div>
Chicago:<br />
<img src="chicago.jpg" alt="skyline" />
</div>
<a href="http://maps.google.com/maps?ll=33.916013,-118.179932&spn=6.874500,5.552490&hl=en">
D
</a>
<div>Los Angeles</div>
</div>
Открывающееся автоматически окно информации
Чтобы окно информации открывалось сразу после загрузки карты, необходимо добавить слово
OPEN внутри тэга <a>. В силу того, что Google Maps может единовременно отображать лишь одно информационное окно, нужно указать только одно автоматически открывающееся окно.
<div class="GMapEZ GSmallMapControl GSmallMapTypeControl"
style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
A OPEN
</a>
<div>
4D Development<br />
World Headquarters<br />
Fort Wayne, Indiana
</div>
</div>
Использование вкладок в окне информации
Если указать более одного тэга <div> внутри метки <a>, в окне информации отобразится по одной вкладке для каждого тэга <div> (впервые реализовано в версии GMapEZ 2.2). Можно задать имя для каждой вкладки, добавив атрибут "title" в тэг <div>:
<div class="GMapEZ GSmallMapControl GSmallMapTypeControl"
style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
A OPEN
</a>
<div title="Address">
4D Development<br />
World Headquarters<br />
Fort Wayne, Indiana
</div>
<div title="Details">
Plenty of room here to describe any
details for this particular marker.
</div>
</div>
Открытие окна информации по ссылке
В приведенном примере для каждого тэга <a> указан атрибут id:
<div class="GMapEZ GSmallMapControl GSmallMapTypeControl"
style="width: 300px; height: 300px;">
<a id="hq" href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
A
</a>
<div>
4D Development<br />
World Headquarters<br />
Fort Wayne, Indiana<br />
See also <a href="#chi">Chicago</a>
</div>
<a id="chi" href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en">
C
</a>
<div>
Chicago:<br />
<img src="chicago.jpg" alt="skyline" />
</div>
</div>
Метки "4D Development" и "Chicago" теперь могут быть открыты при щелчке пользователя на ссылке, находящейся в тексте документа:
The <a href="#hq">4D Development</a> and
<a href="#chi">Chicago</a> markers can be
then be opened from outside the map, like this:
Начиная с версии 2.3 ссылки на окна информации также могут быть использованы внутри других информационных окон. Так сделана ссылка "see also" в метке "4D Development" этого примера.
Продолжение следует.
пятница, 27 июля 2007 г.
Только HTML для создания карт Google Maps. Часть 2. Элементы управления
Инструменты управления для большой карты
Чтобы добавить инструменты управления, необходимо указать их названия после идентификатора GMapEZ следующим образом:
На полученной карте размещены: элемент GLargeMapControl в левом верхнем углу, GMapTypeControl вернем правом углу, линейка масштаба GScaleControl в левом нижнем и окно навигации по карте GOverviewMapControl в правом нижнем углу.
Инструменты управления для средней карты
Элемент GSmallMapControl предоставляет возможности изменения масштаба и перемещения карты. В этом инструменте ползунок изменения масштаба отсутствует.
Инструменты управления для малой карты
Элемент GSmallZoomControl представляет собой небольшой и изящный инструмент управления масштабом. В этом инструменте ползунок изменения масштаба и кнопки перемещения карты отсутствуют. Для управления типом карты существует уменьшенная версия соответствующего инструмента - GSmallMapTypeControl.
Продолжение следует.
Чтобы добавить инструменты управления, необходимо указать их названия после идентификатора GMapEZ следующим образом:
<div class="GMapEZ GLargeMapControl GMapTypeControl GScaleControl GOverviewMapControl"
style="width: 300px; height: 350px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&hl=en">
</a>
</div>
На полученной карте размещены: элемент GLargeMapControl в левом верхнем углу, GMapTypeControl вернем правом углу, линейка масштаба GScaleControl в левом нижнем и окно навигации по карте GOverviewMapControl в правом нижнем углу.
Инструменты управления для средней карты
Элемент GSmallMapControl предоставляет возможности изменения масштаба и перемещения карты. В этом инструменте ползунок изменения масштаба отсутствует.
<div class="GMapEZ GSmallMapControl"
style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&hl=en">
</a>
</div>
Инструменты управления для малой карты
Элемент GSmallZoomControl представляет собой небольшой и изящный инструмент управления масштабом. В этом инструменте ползунок изменения масштаба и кнопки перемещения карты отсутствуют. Для управления типом карты существует уменьшенная версия соответствующего инструмента - GSmallMapTypeControl.
<div class="GMapEZ GSmallZoomControl GSmallMapTypeControl"
style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&hl=en">
</a>
</div>
Продолжение следует.
четверг, 26 июля 2007 г.
Только HTML для создания карт Google Maps. Часть 1. Введение
Воистину интернет мир чудес и нет числа сокровищам его! Стоит о чем-то помечтать и обратиться к поисковику - и вот она, мечта, на заветном блюдечке. А помечталось мне о том, что хорошо бы работать с картами гугл без всяких скриптов, на чистом html. И что бы Вы думали? Есть такой способ! Удивился, проверил - работает. Вот о нем и расскажу. Это как бы логическое продолжение предыдущей статьи, где мы также создавали карту, не прибегая к программированию. Будет у нас парочка способов, на выбор.
Желающие потренироваться в английском могут это сделать вот здесь: http://n01se.net/chouser/gmapez/start.html А мы с Вами будем общаться на нормальном, русском языке :-)
Разработчики просят указывать их логотип, если мы создаем карту на своем сервере. Логотип небольшой и симпатичный, обязательно укажем.
Если у Вас еще нет ключа карт гугл для вашего сайта, получить его можно здесь: Google Maps API Key. Я об этом писал уже не раз, подробно останавливаться не буду.
Только карта
Самая простая страничка HTML, которая включает карту Google Map с помощью GMapEZ будет выглядеть наподобии приведенной ниже. Обязательно укажите собственный ключ для карт Google вместо строки "abcdefg" в этом примере:
Результат приведен на картинке.
Чтобы изменить окно просмотра на карте нужно добавить метку или указать экстент карты, иначе карта будет отображать Fort Wayne, Indiana.
В приведенном выше коде ключевым моментом является задание директивы class="GMapEZ" тэге <div>; если этого не сделать, код будет обработан как обычный <div> и карта не отобразится.
Добавление метки
Xтобы создать метку для карты, нужно зайти на сайт maps.google.com/, дважды щелкнуть на точке, где должна будет размещаться метка и нажать "Ссылка на эту страницу".
Примечание: требуется именно дважды щелкнуть на карте или перетаскивать карту, после поиска по адресу необходимо дважды щелкнуть на нужном месте или переместить карту мышью. Теперь скопируйте полученный адрес URL в обыкновенный тэг <a href="..."> аналогично нашему примеру:
Если Вы не видите символов "ll=" во вставленном адресе URL, он не корректен - не забывайте после поиска адреса переместить карту или дважды щелкнуть на ней. Также отметим, что тип полученной карты соответствует режиму карты, для которой скопирована ссылка - мы это делали для спутниковой карты (тип "satellite").
Добавление нескольких меток
Чтобы создать несколько меток, просто укажите нужное количество тэгов <a href="...">:
Изменение типа карты
Чтобы изменить тип отображаемой карты, добавьте G_MAP_TYPE, G_SATELLITE_TYPE или G_HYBRID_TYPE в атрибуты класса. Приведем пример, как сделать карту типа G_HYBRID_TYPE:
Примечание: идентификатор G_MAP_TYPE используется Google для стандартной карты улиц.
Вы также можете позволить пользователю изменять тип карты во время работы, для этого нужно лишь добавить на карту элемент управления типом карты (как это сделать, мы узнаем далее).
Буквенные и цветные метки
Все созданные нами метки имеют стандартное оформление. Кроме того, мы можем воспользоваться любой строчной или прописной буквой, цифрой, знаком #, знаком $, знаком START (закрашенный треугольник, указывающий вправо), или END (закрашенный квадратик). Начиная с версии GMapEZ 2.2, доступны свойства значков MINI и BLANK. А в версии GMapEZ 2.3 также можно использовать свойство INVISIBLE (невидимый) - такие значки не отображаются на карте, однако чувствительны к нажатию и могут быть полезны для отображения окна информации. Перечисленные иконки можно делать цветными, используя следующие названия цветов: ORANGE, PURPLE, YELLOW, GREEN, BLUE, RED, AQUA, WHITE и GRAY. Название символа и цвет следует писать внутри тэга <a>:
Продолжение следует...
Желающие потренироваться в английском могут это сделать вот здесь: http://n01se.net/chouser/gmapez/start.html А мы с Вами будем общаться на нормальном, русском языке :-)
Разработчики просят указывать их логотип, если мы создаем карту на своем сервере. Логотип небольшой и симпатичный, обязательно укажем.
<a href="http://bluweb.com/chouser/gmapez/"><img
alt="Powered By GMapEZ"
src="http://bluweb.com/chouser/gmapez/poweredbygmapez.jpg"
style="width:73px;height:25px;border:none;" /></a>
Если у Вас еще нет ключа карт гугл для вашего сайта, получить его можно здесь: Google Maps API Key. Я об этом писал уже не раз, подробно останавливаться не буду.
Только карта
Самая простая страничка HTML, которая включает карту Google Map с помощью GMapEZ будет выглядеть наподобии приведенной ниже. Обязательно укажите собственный ключ для карт Google вместо строки "abcdefg" в этом примере:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>My GMapEZ Maps</title>
<meta name="gmapkey" content="abcdefg" />
<script
src="http://bluweb.com/chouser/gmapez/gmapez-2.js"
type="text/javascript"></script>
</head>
<body>
<div class="GMapEZ" style="width: 300px; height: 300px;">
</div>
</body>
</html>
Результат приведен на картинке.
Чтобы изменить окно просмотра на карте нужно добавить метку или указать экстент карты, иначе карта будет отображать Fort Wayne, Indiana.
В приведенном выше коде ключевым моментом является задание директивы class="GMapEZ" тэге <div>; если этого не сделать, код будет обработан как обычный <div> и карта не отобразится.
Добавление метки
Xтобы создать метку для карты, нужно зайти на сайт maps.google.com/, дважды щелкнуть на точке, где должна будет размещаться метка и нажать "Ссылка на эту страницу".
Примечание: требуется именно дважды щелкнуть на карте или перетаскивать карту, после поиска по адресу необходимо дважды щелкнуть на нужном месте или переместить карту мышью. Теперь скопируйте полученный адрес URL в обыкновенный тэг <a href="..."> аналогично нашему примеру:
<div class="GMapEZ" style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
</a>
</div>
Если Вы не видите символов "ll=" во вставленном адресе URL, он не корректен - не забывайте после поиска адреса переместить карту или дважды щелкнуть на ней. Также отметим, что тип полученной карты соответствует режиму карты, для которой скопирована ссылка - мы это делали для спутниковой карты (тип "satellite").
Добавление нескольких меток
Чтобы создать несколько меток, просто укажите нужное количество тэгов <a href="...">:
<div class="GMapEZ" style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
</a>
<a href="http://maps.google.com/maps?ll=40.755580,-73.937988&spn=6.276505,5.552490&hl=en">
</a>
<a href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en">
</a>
<a href="http://maps.google.com/maps?ll=33.916013,-118.179932&spn=6.874500,5.552490&hl=en">
</a>
</div>
Изменение типа карты
Чтобы изменить тип отображаемой карты, добавьте G_MAP_TYPE, G_SATELLITE_TYPE или G_HYBRID_TYPE в атрибуты класса. Приведем пример, как сделать карту типа G_HYBRID_TYPE:
<div class="GMapEZ G_HYBRID_TYPE"
style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&hl=en">
</a>
</div>
Примечание: идентификатор G_MAP_TYPE используется Google для стандартной карты улиц.
Вы также можете позволить пользователю изменять тип карты во время работы, для этого нужно лишь добавить на карту элемент управления типом карты (как это сделать, мы узнаем далее).
Буквенные и цветные метки
Все созданные нами метки имеют стандартное оформление. Кроме того, мы можем воспользоваться любой строчной или прописной буквой, цифрой, знаком #, знаком $, знаком START (закрашенный треугольник, указывающий вправо), или END (закрашенный квадратик). Начиная с версии GMapEZ 2.2, доступны свойства значков MINI и BLANK. А в версии GMapEZ 2.3 также можно использовать свойство INVISIBLE (невидимый) - такие значки не отображаются на карте, однако чувствительны к нажатию и могут быть полезны для отображения окна информации. Перечисленные иконки можно делать цветными, используя следующие названия цветов: ORANGE, PURPLE, YELLOW, GREEN, BLUE, RED, AQUA, WHITE и GRAY. Название символа и цвет следует писать внутри тэга <a>:
<div class="GMapEZ"
style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
A
</a>
<a href="http://maps.google.com/maps?ll=40.755580,-73.937988&spn=6.276505,5.552490&hl=en">
YELLOW MINI
</a>
<a href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en">
PURPLE END
</a>
<a href="http://maps.google.com/maps?ll=33.916013,-118.179932&spn=6.874500,5.552490&hl=en">
GREEN START
</a>
</div>
Продолжение следует...
Моя карта Google Maps за полчаса
Эта статья для тех, кому важен результат - создать и разместить в сети интерактивную карту с метками на ней и подробным описанием каждой метки. Это может быть сеть магазинов или просто места встречи друзей. Главное, чтобы для достижения этого результата не требовались специальные знания и много времени. Вот как это сделать, я сейчас и расскажу.
Заходим на сайт www.click2map.com и кликаем на картинке в центре.
Открывается окно с предложением авторизоваться.
В левом нижнем углу окошка жмем кнопку "Create a free account now". Вводим имя пользователя, адрес электронной почты (все равно какой, на почту ничего не шлют) и пароль. Щелкаем кнопку ОК.
Перед нами появляется окно приложения с картой и элементами управления.
Заходим в главном меню в пункт Edit->Map и видим окно редактирования карты.
Заголовок карты и масштаб точно нужно поменять, остальное по желанию. Вводим нужный заголовок и ползунком внизу окна устанавливаем нужный масштаб. Для выбора окна просмотра карту можно передвинуть мышкой или в текстовом поле вверху справа указать название, например "Нижний Новгород" и нажать "Geocode". Мне это делать не пришлось, поскольку центр карты определился автоматически по моему IP-адресу и меня это устроило. Еще можно вручную заполнить поля координат, но это на любителя.
Жмем ОК и видим, что изменения отразились на карте
После того, как мы выбрали нужное место на карте, пора добавить на эту карту свою информацию. Заходим в меню New->Marker, открывается окошко мастера создания метки на карте.
Мы сейчас находимся на вкладке "Marker Properties". Вводим описание и заголовок создаваемой метки. В текстовое поле ввода адреса пишем "Нижний Новгород" и жмем кнопочку "Geocode". И, о чудо, все получилось, в полях с координатами появляются соответствующие значения.
Чтобы наша карта была "живее" и интереснее, поменяем стандартную иконку новой метки на более подходящую или симпатичную для нас. Нажмем кнопку "change icon" и выберем набор иконок в выпадающем списке, а потом и саму иконку из предложенных вариантов.
Теперь зайдем на вкладку "Additional Properties" и укажем некоторые дополнительные свойства метки.
Есть еще вкладка "Extra tabs", но здесь нам пока ничего не надо менять.
После указания всех необходимых свойств метки жмем ОК.
Отлично, метка появилась на карте. Вы можете добавить еще сколько угодно меток, а мне и одной хватит. Карта готова, пора ее опубликовать в интернет. Выбираем пункт меню Publish->As a Web page и получаем окно выбора параметров публикации.
Будем считать, что нас все устраивает и оставляем все параметры без изменений. Жмем "Preview" и в новом окошке видим, как карта будет выглядеть на сайте.
Здесь мы также полагаем, что нас результат устраивает, закрываем предпросмотр и жмем ОК. Появляется окошко с сообщением, что карта готова, и и адресом созданной карты.
У меня адрес карты вот такой http://generator.click2map.com/maps/veter/Map1. И выглядит эта карта вот так:
Эту ссылку можно послать электронной почтой, можно выложить на сайт.
Выходим из программы, нажав Logout в меню.
Если нас не устраивает реклама на странице с картой или мы хотим карту обязательно на своем сайте, то продолжаем наши манипуляции. Открываем исходный код страницы, копируем и сохраняем в файл на своем сервере (в кодировке UTF-8, или надо будет поправить кодировку документа).
Идем на сайт http://www.google.com/apis/maps/signup.html и создаем ключик для этого сайта.
Ищем в полученной странице с картой запись
key=ABQIAAAABDdrlnxjwGrzZSY_xqsyPRS6Oygn0p92Z5SsZQPugQ0K2QrfaBQLC82OXwsbml8Za-i3WPzy-cLkUA
и меняем ключ на свой.
Выкидываем строки с разной фигней, наподобии баннеров и счетчиков. Добавляем чего хотим (если хотим). И получаем карту, отвечающую нашим вкусам.
Если кликнуть на иконке на карте или справа от карты в списке меток, откроется окошко с подробной информацией о выбранной метке.
Все! У меня это заняло около часа времени, при том, что я еще скриншоты делал и комментарии записывал. Приведенный алгоритм Вы можете повторить в любой момент, когда Вам потребуется создать свою карту. Ни пуха!
Вместо заключения.
Мы познакомились с одним из сервисов, позволяющих создавать весьма продвинутые карты на основе Google Maps. Сервис бесплатный и открыт всем желающим. Созданная карта доступна на сайте сервиса по простой ссылке, процесс переноса карты на свой сервер также сложности не представляет. Как видите, программирование не требуется вовсе, так что я уже думаю сменить консоль (linux shell) разработчика на перо писателя :-)
Заходим на сайт www.click2map.com и кликаем на картинке в центре.
Открывается окно с предложением авторизоваться.
В левом нижнем углу окошка жмем кнопку "Create a free account now". Вводим имя пользователя, адрес электронной почты (все равно какой, на почту ничего не шлют) и пароль. Щелкаем кнопку ОК.
Перед нами появляется окно приложения с картой и элементами управления.
Заходим в главном меню в пункт Edit->Map и видим окно редактирования карты.
Заголовок карты и масштаб точно нужно поменять, остальное по желанию. Вводим нужный заголовок и ползунком внизу окна устанавливаем нужный масштаб. Для выбора окна просмотра карту можно передвинуть мышкой или в текстовом поле вверху справа указать название, например "Нижний Новгород" и нажать "Geocode". Мне это делать не пришлось, поскольку центр карты определился автоматически по моему IP-адресу и меня это устроило. Еще можно вручную заполнить поля координат, но это на любителя.
Жмем ОК и видим, что изменения отразились на карте
После того, как мы выбрали нужное место на карте, пора добавить на эту карту свою информацию. Заходим в меню New->Marker, открывается окошко мастера создания метки на карте.
Мы сейчас находимся на вкладке "Marker Properties". Вводим описание и заголовок создаваемой метки. В текстовое поле ввода адреса пишем "Нижний Новгород" и жмем кнопочку "Geocode". И, о чудо, все получилось, в полях с координатами появляются соответствующие значения.
Чтобы наша карта была "живее" и интереснее, поменяем стандартную иконку новой метки на более подходящую или симпатичную для нас. Нажмем кнопку "change icon" и выберем набор иконок в выпадающем списке, а потом и саму иконку из предложенных вариантов.
Теперь зайдем на вкладку "Additional Properties" и укажем некоторые дополнительные свойства метки.
Есть еще вкладка "Extra tabs", но здесь нам пока ничего не надо менять.
После указания всех необходимых свойств метки жмем ОК.
Отлично, метка появилась на карте. Вы можете добавить еще сколько угодно меток, а мне и одной хватит. Карта готова, пора ее опубликовать в интернет. Выбираем пункт меню Publish->As a Web page и получаем окно выбора параметров публикации.
Будем считать, что нас все устраивает и оставляем все параметры без изменений. Жмем "Preview" и в новом окошке видим, как карта будет выглядеть на сайте.
Здесь мы также полагаем, что нас результат устраивает, закрываем предпросмотр и жмем ОК. Появляется окошко с сообщением, что карта готова, и и адресом созданной карты.
У меня адрес карты вот такой http://generator.click2map.com/maps/veter/Map1. И выглядит эта карта вот так:
Эту ссылку можно послать электронной почтой, можно выложить на сайт.
Выходим из программы, нажав Logout в меню.
Если нас не устраивает реклама на странице с картой или мы хотим карту обязательно на своем сайте, то продолжаем наши манипуляции. Открываем исходный код страницы, копируем и сохраняем в файл на своем сервере (в кодировке UTF-8, или надо будет поправить кодировку документа).
Идем на сайт http://www.google.com/apis/maps/signup.html и создаем ключик для этого сайта.
Ищем в полученной странице с картой запись
key=ABQIAAAABDdrlnxjwGrzZSY_xqsyPRS6Oygn0p92Z5SsZQPugQ0K2QrfaBQLC82OXwsbml8Za-i3WPzy-cLkUA
и меняем ключ на свой.
Выкидываем строки с разной фигней, наподобии баннеров и счетчиков. Добавляем чего хотим (если хотим). И получаем карту, отвечающую нашим вкусам.
Если кликнуть на иконке на карте или справа от карты в списке меток, откроется окошко с подробной информацией о выбранной метке.
Все! У меня это заняло около часа времени, при том, что я еще скриншоты делал и комментарии записывал. Приведенный алгоритм Вы можете повторить в любой момент, когда Вам потребуется создать свою карту. Ни пуха!
Вместо заключения.
Мы познакомились с одним из сервисов, позволяющих создавать весьма продвинутые карты на основе Google Maps. Сервис бесплатный и открыт всем желающим. Созданная карта доступна на сайте сервиса по простой ссылке, процесс переноса карты на свой сервер также сложности не представляет. Как видите, программирование не требуется вовсе, так что я уже думаю сменить консоль (linux shell) разработчика на перо писателя :-)
Эксперименты с Google Maps
Карты Google Maps находят многочисленные применения, позволяя создавать различные интерактивные сервисы. Мы рассмотрим некоторые возможности на примерах. Английский оригинал статьи можно найти по адресу http://maps.forum.nu/.
Главная карта
Настраиваемая пользователем карта с информацией о дорожном движении и подгрузкой меток из файла XML ('antennas'), геокодированием, и проч.
Кликните на территории США, чтобы получить информацию о штате.
Отображение трэка из файлов Magellan Explorist
Загрузите файл трэка с Magellan Explorist GPS и увидите его нарисованным на карте.
Выбор маршрута поездки - устаревший способ
Способ устарел, поскольку теперь существует объект GDirections в стандартном API и лишних ухищрений не требуется.
Выбор маршрута поездки - правильный способ
Построение маршрута с помощью методов объекта GDirections. Используется собственный стиль вывода результатов.
Сканирующий радар
Этот пример не более, чем игрушка и написан просто ради смеха. Представляет собой анимированное окно радара с ломаными линиями.
Воздушный путь самолета
Кликните в точке вылета, в точке прилета и увидите воздушный маршрут самолета, изображенный дугой.
Полигоны, пересекающие нулевой меридиан (только для браузера Firefox)
Для отображения линий, пересекающих нулевой меридиан, их необходимо необходимо разделять на две части.
Нарисуйте полигон, кликая на карте и кликните на первой метке ("start marker"), чтобы замкнуть полигон. Клиентский код рисует полилинию, точки пересылаются на сервер и сервер возвращает полигональное представление полученной области, разделенной на части.
Отображение маршрутов и вычисление расстояния
Нарисуйте ломаную линию (маршрут), кликая по карте. В правой части страницы будет отображаться длина каждого сегмента.
Отображение меток из базы данных
Используется связка PHP/MySQL, исходный код см. здесь.
Добавьте метку. Метка будет сохранена в базе данных и отображена при обновлении карты.
Синхронизация карт
Набор карт, синхронизированных между собой. Практической ценности пример не имеет :-)
Синхронизация наложенных карт
Набор карт, синхронизированных между собой. Пример полезен не более предыдущего :-)
Расстояние от указателя мышки до линии
Кликните на карте пару раз или больше для создания ломаной линии. Расстояние от указателя мыши до каждой линии вычисляется в пикселях.
Миникарта в окне информации
Кликните на метке и на вкладке "Местоположение" ("Location").
Сенсорный круг (на касательной плоскости)
1. Кликните на карте в точке, где будет располагаться центр круга
2. Кликните снова, чтобы задать радиус круга
3. Переместите мышку внутрь круга и наружу.
Полученный круг на самом деле не лежит на поверхности Земли, а лишь касается ее, но для малых радиусов это не существенно.
Сенсорный круг (на поверхности планеты)
В отличии от предыдущего примера, этот круг располагается на поверхности Земли и спроецирован в системе координат карты. При достаточно больших радиусах становится заметным искажение формы круга, вносимое проекцией Меркатора.
Изменение масштаба колесиком мыши
Управление масштабом карты с помощью колесика мыши.
Изменение размера карты "на лету"
Пример демонстрирует возможность отображать и прятать карту, а также изменять ее масштаб динамически.
Главная карта
Настраиваемая пользователем карта с информацией о дорожном движении и подгрузкой меток из файла XML ('antennas'), геокодированием, и проч.
Кликните на территории США, чтобы получить информацию о штате.
Отображение трэка из файлов Magellan Explorist
Загрузите файл трэка с Magellan Explorist GPS и увидите его нарисованным на карте.
Выбор маршрута поездки - устаревший способ
Способ устарел, поскольку теперь существует объект GDirections в стандартном API и лишних ухищрений не требуется.
Выбор маршрута поездки - правильный способ
Построение маршрута с помощью методов объекта GDirections. Используется собственный стиль вывода результатов.
Сканирующий радар
Этот пример не более, чем игрушка и написан просто ради смеха. Представляет собой анимированное окно радара с ломаными линиями.
Воздушный путь самолета
Кликните в точке вылета, в точке прилета и увидите воздушный маршрут самолета, изображенный дугой.
Полигоны, пересекающие нулевой меридиан (только для браузера Firefox)
Для отображения линий, пересекающих нулевой меридиан, их необходимо необходимо разделять на две части.
Нарисуйте полигон, кликая на карте и кликните на первой метке ("start marker"), чтобы замкнуть полигон. Клиентский код рисует полилинию, точки пересылаются на сервер и сервер возвращает полигональное представление полученной области, разделенной на части.
Отображение маршрутов и вычисление расстояния
Нарисуйте ломаную линию (маршрут), кликая по карте. В правой части страницы будет отображаться длина каждого сегмента.
Отображение меток из базы данных
Используется связка PHP/MySQL, исходный код см. здесь.
Добавьте метку. Метка будет сохранена в базе данных и отображена при обновлении карты.
Синхронизация карт
Набор карт, синхронизированных между собой. Практической ценности пример не имеет :-)
Синхронизация наложенных карт
Набор карт, синхронизированных между собой. Пример полезен не более предыдущего :-)
Расстояние от указателя мышки до линии
Кликните на карте пару раз или больше для создания ломаной линии. Расстояние от указателя мыши до каждой линии вычисляется в пикселях.
Миникарта в окне информации
Кликните на метке и на вкладке "Местоположение" ("Location").
Сенсорный круг (на касательной плоскости)
1. Кликните на карте в точке, где будет располагаться центр круга
2. Кликните снова, чтобы задать радиус круга
3. Переместите мышку внутрь круга и наружу.
Полученный круг на самом деле не лежит на поверхности Земли, а лишь касается ее, но для малых радиусов это не существенно.
Сенсорный круг (на поверхности планеты)
В отличии от предыдущего примера, этот круг располагается на поверхности Земли и спроецирован в системе координат карты. При достаточно больших радиусах становится заметным искажение формы круга, вносимое проекцией Меркатора.
Изменение масштаба колесиком мыши
Управление масштабом карты с помощью колесика мыши.
Изменение размера карты "на лету"
Пример демонстрирует возможность отображать и прятать карту, а также изменять ее масштаб динамически.
воскресенье, 15 июля 2007 г.
История и некоторые курьезы Google Maps и Google Earth
Нашел забавную статейку, озаглавленную "Un poco de historia y curiosidades de Google Maps/Earth". Кто захочет, читайте в оригинале (на испанском языке) по этому адресу http://www.tufuncion.com/google-maps-earth.
Наверное, почти все мы время от времени пользуемся Google Earth/Maps для поиска нужного места, сооружения или памятника. Но черт возьми, интересно узнать, как же работает Google Maps/Earth?
В отличие от того, что Вы себе могли вообразить, ответ заключается не в том, что нужно зайти на сайт google.ru и прочитать инструкции по установке и использованию приложения...
Давайте вспомним, что программа, которую мы сегодня называем Google Earth, берет свое начало от программы Keyhole, стоившей около 90 долларов. Потом Google купил Keyhole вместе с терабайтами цифровых карт и возникла идея для продвижения продукта начать распространять упрощенную версию программы бесплатно. Точно так же и почти все остальные сервисы Google начинаются с их бесплатного распространения и постепенно развиваются.
В новых руках Google Maps был анонсирован впервые 8-го февраля 2005 года и находился в состоянии бета-тестирования в течении 6 месяцев, пока не была достигнута высокая степень синхронности Ajax-интерфейса и действий пользователя. Уже шел июнь 2005 года, когда Google опубликовал API для Google Maps, официально делая возможным изменение почти всех свойств оригинального интерфейса.
Основными источниками карт являются космические и аэрофотоснимки, хотя совместно с ними используются оцифрованные карты таких компаний, как TeleAtlas и EarthSat. Очевидно, что карты передают не реальный мир, а его устаревшую картину, хотя Google утверждает, что вся информация не старше трех лет и постоянно обновляется.
Поскольку используется множество разнородных исходных материалов, имеющих различное пространственное разрешение, не все области на карте отображены достаточно хорошо, но в процессе обновления постоянно добавляются детализированные карты отдельных участков.
Курьезы
Наверное, почти все мы время от времени пользуемся Google Earth/Maps для поиска нужного места, сооружения или памятника. Но черт возьми, интересно узнать, как же работает Google Maps/Earth?
В отличие от того, что Вы себе могли вообразить, ответ заключается не в том, что нужно зайти на сайт google.ru и прочитать инструкции по установке и использованию приложения...
Давайте вспомним, что программа, которую мы сегодня называем Google Earth, берет свое начало от программы Keyhole, стоившей около 90 долларов. Потом Google купил Keyhole вместе с терабайтами цифровых карт и возникла идея для продвижения продукта начать распространять упрощенную версию программы бесплатно. Точно так же и почти все остальные сервисы Google начинаются с их бесплатного распространения и постепенно развиваются.
В новых руках Google Maps был анонсирован впервые 8-го февраля 2005 года и находился в состоянии бета-тестирования в течении 6 месяцев, пока не была достигнута высокая степень синхронности Ajax-интерфейса и действий пользователя. Уже шел июнь 2005 года, когда Google опубликовал API для Google Maps, официально делая возможным изменение почти всех свойств оригинального интерфейса.
Основными источниками карт являются космические и аэрофотоснимки, хотя совместно с ними используются оцифрованные карты таких компаний, как TeleAtlas и EarthSat. Очевидно, что карты передают не реальный мир, а его устаревшую картину, хотя Google утверждает, что вся информация не старше трех лет и постоянно обновляется.
Поскольку используется множество разнородных исходных материалов, имеющих различное пространственное разрешение, не все области на карте отображены достаточно хорошо, но в процессе обновления постоянно добавляются детализированные карты отдельных участков.
Курьезы
- В настоящий момент широко известен маршрут, протяженность которого составялет 24605 километров. Он проходит из Забайкальск, Россия в Оверлэнд, Уналяска
- События Библии на карте Google Maps
- Текстовая версия (ASCII) карт Google
- Google Maps также включает информацию о других планетах… Google Moon (Луна), Google Mars (Марс); а также игровых мирах: Карта Мира игры Wordcraft WoW
- Планета ночью в Google Maps (красиво!)
- Курьезы в Google Street View (на испанском)
- А теперь отдохнем и развлечемся, разыскивая лица на разных картах
пятница, 13 июля 2007 г.
Веб-конверторы для GPS-навигации
Перенес конверторы на основной сайт, поскольку в блоге многие посетители затрудняются найти нужную страницу.
http://mobigroup.ru/page/services
http://mobigroup.ru/page/services
четверг, 12 июля 2007 г.
Формат KML как ключ к миру геоинформации
Трэк с GPS приемника в Google Earth
Мы уже познакомились с возможностями использования карт Google Maps в интернет в обзоре Google Maps для начинающих и статьях цикла Google Mapplets:
Google Mapplets: Концепция и примеры. Введение
Google Mapplets: Начинаем работу
Google Mapplets: Концепция и примеры. Практикум
Google Mapplets: Отличие "настоящих" маплетов от стандартного Maps API
Полученные знания помогли нам начать решать практические задачи
Google Maps в примерах
Как мы видим, на практике почти не требуется программирование, а требуется понимание способов взаимодействия с картографическими сервисами. Для интеграции информации с картами Google используется стандарт KML. Данные в этом формате можно отобразить на карте Google Maps или Google Earth. Вот мы и займемся изучением названного стандарта. Я планирую рассказать обо всем по порядку в цикле из следующих статей:
Формат KML. Часть 1. Введение
Формат KML. Часть 2. Основные возможности
Формат KML. Часть 3. Расширенные возможности
Формат KML. Часть 4. Введение в версию 2.1
Формат KML. Часть 5. Регионы
Формат KML. Часть 6. 3D модели с текстурами
Формат KML. Часть 7. Частичное обновление данных
Формат KML. Часть 8. Время жизни данных
Формат KML. Часть 9. Группировка данных
Формат KML. Часть 10. Заключение
Формат KML. Часть 2. Основные возможности
Самый простой способ создания документов KML предоставляет программа Google Earth, что позволяет обойтись без ручного редактирования файлов KML. Метки местоположения, покрытия земной поверхности, пути и многоугольники могут быть созданы непосредственно в Google Earth.
Метки местоположения
Метки являются одной из самых широко используемых возможностей в Google Earth. Они представляют собой отметку определенной точки поверхности планеты и отображаются значком с кнопкой желтого цвета. Простейшая метка содержит только элемент <Point>, который определяет ее местоположение. Вы также можете указать наименование и собственный значок для метки и добавить к ней другие географические элементы.
Откройте KML файл с примерами в Google Earth и разверните папку Метки (Placemarks). Эта папка содержит три различных типа меток: простая, плавающая и привязанная. Код KML для простой метки выглядит следующим образом:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Placemark>
<name>Simple placemark</name>
<description>Attached to the ground. Intelligently places itself
at the height of the underlying terrain.</description>
<Point>
<coordinates>-122.0822035425683,37.42228990140251,0</coordinates>
</Point>
</Placemark>
</kml>
Структура этого файла такая:
Если хотите знать, то эта метка расположена над Google's Building 41, где разрабатывается Google Earth!
Обычно пользователи представляют себе метку в Google Earth как элемент с вложенным элементом в формате KML. Точечная метка позволяет лишь отобразить метку и подпись к ней в 3D просмотрщике Google Earth. По умолчанию иконка представляет собой желтую кнопку. На самом деле формат KML предоставляет возможность включать в элемент один или более геометрических объектов, таких как ломаная, многоугольник или модель. Но только точечная метка может содержать иконку и подпись. Координаты точки используются для размещения иконки, но сам геометрический объект точка никак не отображается.
На картинках изображены вышеперечисленные типы меток, для просмотра полномасштабного изображения кликните на картинке.
Простая метка
Плавающая метка (поднята над поверхностью)
Привязанная метка (поднята над поверхностью
и привязана "веревочкой")
Продолжение следует...
Метки местоположения
Метки являются одной из самых широко используемых возможностей в Google Earth. Они представляют собой отметку определенной точки поверхности планеты и отображаются значком с кнопкой желтого цвета. Простейшая метка содержит только элемент <Point>, который определяет ее местоположение. Вы также можете указать наименование и собственный значок для метки и добавить к ней другие географические элементы.
Откройте KML файл с примерами в Google Earth и разверните папку Метки (Placemarks). Эта папка содержит три различных типа меток: простая, плавающая и привязанная. Код KML для простой метки выглядит следующим образом:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Placemark>
<name>Simple placemark</name>
<description>Attached to the ground. Intelligently places itself
at the height of the underlying terrain.</description>
<Point>
<coordinates>-122.0822035425683,37.42228990140251,0</coordinates>
</Point>
</Placemark>
</kml>
Структура этого файла такая:
- Декларация документа XML. Это первая строка каждого файла KML. Перед этой строкой не должно быть никаких строк или символов.
- Декларация пространства имен KML. Это вторая строка каждого файла KML версии 2.1.
- Объект метка, содержащий вложенные элементы:
- Имя метки, отображаемое как подпись
- Описание, отображаемое во всплывающем окошке
- Географические координаты на поверхности планеты (широта, долгота и высота). Последний параметр (высота) может не указываться.
Если хотите знать, то эта метка расположена над Google's Building 41, где разрабатывается Google Earth!
Обычно пользователи представляют себе метку в Google Earth как элемент
На картинках изображены вышеперечисленные типы меток, для просмотра полномасштабного изображения кликните на картинке.
Простая метка
Плавающая метка (поднята над поверхностью)
Привязанная метка (поднята над поверхностью
и привязана "веревочкой")
Продолжение следует...
Формат KML. Часть 1. Введение
Предлагаю Вашему вниманию перевод документации, размещенной по адресу http://code.google.com/apis/kml/documentation/kml_tut.html и http://code.google.com/apis/kml/documentation/kml_21tutorial.html.
Файловый формат KML используется для отображения географических данных в программах Google Earth, Google Maps и Google Maps для мобильных устройств. Стандарт KML основан на стандарте XML и использует тэговую структуру с вложенными элементами и атрибутами. Все имена тэгов чувствительны к регистру и должны писаться точно так, как этого требует спецификация KML 2.1.
Если Вы впервые знакомитесь с форматом KML, прочитайте это руководство и файлы примеров (SamplesInEarth и SamplesInMaps) чтобы получить представление о базовой структуре файлов KML и наиболее часто используемыми тэгами. Вначале мы рассмотрим возможности создания файлов KML из пользовательского интерфейса программы Google Earth (или другой аналогичной программы визуализации поверхности планеты, далее Earth). Эти возможности включают в себя метки местоположения, описания, покрытия земной поверхности, пути и многоугольники. Далее мы узнаем расширенные возможности, требующие ручного редактирования файлов KML. Поскольку KML является по своему содержанию простым текстовым файлом, его легко можно отредактировать в любом текстовом редакторе и сохранить потом с расширением .kml или .kmz для дальнейшего просмотра в Earth.
Совет: чтобы получить текстовое содержание KML описания какого-либо объекта при просмотре его в Earth нужно кликнуть правой клавишей мышки на этом объекте и выбрать пункт контекстного меню "Копировать" (или "Copy") и вставить содержимое буфера обмена в любой текстовый редактор. Таким образом визуальное представление объекта "на лету" превратится в текстовое KML-описание. Обязательно попробуйте эту возможность.
Все представленные далее примеры собраны в одном файле формата KML. Скачайте этот файл и откройте в Google Earth.
Для получения и отображения файлов KML с удаленного сервера по протоколу HTTP требуется указать тип содержимого (content-type). Google Earth умеет работать с файлами KML (MIME-тип application/vnd.google-earth.kml+xml) и KMZ (MIME-тип application/vnd.google-earth.kmz).
Файл KML должен содержать корректные данные в соответствии со стандартом KML и начинаться с декларации XML (<?xml version="1.0" encoding="UTF-8"?>). В случае ошибки получения данных или некорректного содержимого файла сетевая ссылка деактивируется и выводится сообщение об ошибке.
Формат KML. Часть 2. Основные возможности.
Файловый формат KML используется для отображения географических данных в программах Google Earth, Google Maps и Google Maps для мобильных устройств. Стандарт KML основан на стандарте XML и использует тэговую структуру с вложенными элементами и атрибутами. Все имена тэгов чувствительны к регистру и должны писаться точно так, как этого требует спецификация KML 2.1.
Если Вы впервые знакомитесь с форматом KML, прочитайте это руководство и файлы примеров (SamplesInEarth и SamplesInMaps) чтобы получить представление о базовой структуре файлов KML и наиболее часто используемыми тэгами. Вначале мы рассмотрим возможности создания файлов KML из пользовательского интерфейса программы Google Earth (или другой аналогичной программы визуализации поверхности планеты, далее Earth). Эти возможности включают в себя метки местоположения, описания, покрытия земной поверхности, пути и многоугольники. Далее мы узнаем расширенные возможности, требующие ручного редактирования файлов KML. Поскольку KML является по своему содержанию простым текстовым файлом, его легко можно отредактировать в любом текстовом редакторе и сохранить потом с расширением .kml или .kmz для дальнейшего просмотра в Earth.
Совет: чтобы получить текстовое содержание KML описания какого-либо объекта при просмотре его в Earth нужно кликнуть правой клавишей мышки на этом объекте и выбрать пункт контекстного меню "Копировать" (или "Copy") и вставить содержимое буфера обмена в любой текстовый редактор. Таким образом визуальное представление объекта "на лету" превратится в текстовое KML-описание. Обязательно попробуйте эту возможность.
Все представленные далее примеры собраны в одном файле формата KML. Скачайте этот файл и откройте в Google Earth.
Для получения и отображения файлов KML с удаленного сервера по протоколу HTTP требуется указать тип содержимого (content-type). Google Earth умеет работать с файлами KML (MIME-тип application/vnd.google-earth.kml+xml) и KMZ (MIME-тип application/vnd.google-earth.kmz).
Файл KML должен содержать корректные данные в соответствии со стандартом KML и начинаться с декларации XML (<?xml version="1.0" encoding="UTF-8"?>). В случае ошибки получения данных или некорректного содержимого файла сетевая ссылка деактивируется и выводится сообщение об ошибке.
Формат KML. Часть 2. Основные возможности.
понедельник, 9 июля 2007 г.
Google Maps для начинающих
Представляю перевод статьи http://www.google.com/help/maps/tour/.
С сервисом Google Maps Вы можете посмотреть мир прямо сейчас. На Ваш выбор кругосветное путешествие или Ваш дом с высоты птичьего полета и многое другое. Притом все это работает как с Вашего компьютера, так и с КПК, смартфона или сотового телефона.
Вы можете кликнуть на любой картинке в статье и увидеть соответствующую карту Google Maps.
Простая навигация
Сервис Google Maps предоставляет динамичные и интерактивные карты, которые можно просто перетаскивать, вместо того, чтобы ждать после каждого клика загрузки следующей части карты. Укажите имя региона или округа и рассматривайте их целиком или по частям как на обычной карте улиц. Используйте мышку или соответствующие стрелочки на карте для перемещения влево, вправо, вверх и вниз по карте. Используйте ползунок на карте для приближения и удаления или нажимайте кнопки + или -.
Вся мощь поиска и карт Google
В зависимости от Вашего местоположения Вы можете использовать карты Google для поиска фирм в заданной области карты. Например, если Вы хотите найти кафе, откройте на карте нужный район, введите слово "coffee" и найденные кафе отобразятся значками на карте. Или просто введите "coffee" и почтовый индекс или название города и на карте появятся местоположения искомых кафе.
Локальный поиск предоставит Вам список найденных объектов и их описание, включая название, номер телефона и адрес. Щелкните на интересующем Вас названии в списке и Вы увидите его на карте. Кроме того, найденные объекты будут отображены группой значков на карте, на каждом значке можно кликнуть и получить подробную информацию об объекте, включая фотографии и обзорную статью.
Вид с высоты птичьего полета
Хотите увидеть любую точку планеты, как она видна из гондолы воздушного шара? Включите режим "спутник" и Вы сможете смотреть снимки со спутника и аэрофотоснимки, легко изменяя масштаб изображения и перемещаясь в любом направлении.
Вы также можете Выбрать режим "Гибрид", совмещающий просмотр обычной карты со спутниковыми изображениями.
Панорама улиц
Для Вас доступна виртуальная прогулка по галерее панорам улиц. Пока доступны виды Денвера, Лас-Вегаса, Майами, Нью-Йорка и район залива Сан-Франциско. Вы можете выбрать интересное место, разглядеть достопримечательности и виртуально путешествовать по улицам и окрестностям.
Города, для которых Вы можете увидеть виртуальную панораму улиц, отмечены значком с изображением камеры, а дороги выделены синей окантовкой. Чтобы переключиться в режим просмотра панорамы щелкните на значке с изображением человечка или на обведенной синей линией улице на карте. Для навигации по виртуальному миру можно перетаскивать картинку мышкой или пользоваться стрелочками окна просмотра панорамы.
Создать свои собственные карты очень легко
Вы можете создавать свои собственные карты, добавляя к ним значки, линии, многоугольники и обзорныю информацию в виде форматированного текста, фотографий и видеороликов. Созданные карты могут быть сделаны доступными для всех. И разумеется, их можно просматривать в Google Earth.
Выбор дорожного маршрута
Карты Google помогут Вам выбрать маршрут для путешествия. Достаточно лишь указать пункты начала и завершения поездки и при желании задать несколько промежуточных пунктов.
Вместо заключения
После того, как мы познакомились с преимуществами цифровых карт, пришло время начать ими пользоваться. Благо карты Google доступны для всех и притом совершенно бесплатно. Понимаю, психика русского человека словами "бесплатно" давно уже травмирована - слишком много мышеловок с "бесплатным" сыром довелось повидать. Однако хватит жить "совками" - весь мир повышает свой уровень жизни за счет этих самых цифровых технологий, пора и нам решиться. Кстати, словосочетание "цифровые карты" или "электронная картография" существуют только в русском языке - в англоязычном интернете пишут просто "карты" или "набор картографических данных". За рубежом бумажные карты это раритет. Да и сами карты сейчас правильнее называть базами данных с географической привязкой. Так что Вы можете упираться, но цифровая эпоха берет свое. И еще позвольте развенчать миф о монопольном положении сервиса Google Maps - конкуренты есть, просто они не озаботились рассказать о своих сервисах на русском языке. Тот же Microsoft, к примеру. Но документацию от них я переводить не буду. Как пел небезысвестный бард, "я не люблю, когда мне лезут в душу, тем более, когда в нее плюют".
Для тех, кто оценил всю прелесть интерактивных карт Google Maps предлагаю обзор Google Mapplets: Концепция и примеры. Введение и решение некоторых часто встречающихся задач Google Maps в примерах.
С сервисом Google Maps Вы можете посмотреть мир прямо сейчас. На Ваш выбор кругосветное путешествие или Ваш дом с высоты птичьего полета и многое другое. Притом все это работает как с Вашего компьютера, так и с КПК, смартфона или сотового телефона.
Вы можете кликнуть на любой картинке в статье и увидеть соответствующую карту Google Maps.
Простая навигация
Сервис Google Maps предоставляет динамичные и интерактивные карты, которые можно просто перетаскивать, вместо того, чтобы ждать после каждого клика загрузки следующей части карты. Укажите имя региона или округа и рассматривайте их целиком или по частям как на обычной карте улиц. Используйте мышку или соответствующие стрелочки на карте для перемещения влево, вправо, вверх и вниз по карте. Используйте ползунок на карте для приближения и удаления или нажимайте кнопки + или -.
Вся мощь поиска и карт Google
В зависимости от Вашего местоположения Вы можете использовать карты Google для поиска фирм в заданной области карты. Например, если Вы хотите найти кафе, откройте на карте нужный район, введите слово "coffee" и найденные кафе отобразятся значками на карте. Или просто введите "coffee" и почтовый индекс или название города и на карте появятся местоположения искомых кафе.
Локальный поиск предоставит Вам список найденных объектов и их описание, включая название, номер телефона и адрес. Щелкните на интересующем Вас названии в списке и Вы увидите его на карте. Кроме того, найденные объекты будут отображены группой значков на карте, на каждом значке можно кликнуть и получить подробную информацию об объекте, включая фотографии и обзорную статью.
Вид с высоты птичьего полета
Хотите увидеть любую точку планеты, как она видна из гондолы воздушного шара? Включите режим "спутник" и Вы сможете смотреть снимки со спутника и аэрофотоснимки, легко изменяя масштаб изображения и перемещаясь в любом направлении.
Вы также можете Выбрать режим "Гибрид", совмещающий просмотр обычной карты со спутниковыми изображениями.
Панорама улиц
Для Вас доступна виртуальная прогулка по галерее панорам улиц. Пока доступны виды Денвера, Лас-Вегаса, Майами, Нью-Йорка и район залива Сан-Франциско. Вы можете выбрать интересное место, разглядеть достопримечательности и виртуально путешествовать по улицам и окрестностям.
Города, для которых Вы можете увидеть виртуальную панораму улиц, отмечены значком с изображением камеры, а дороги выделены синей окантовкой. Чтобы переключиться в режим просмотра панорамы щелкните на значке с изображением человечка или на обведенной синей линией улице на карте. Для навигации по виртуальному миру можно перетаскивать картинку мышкой или пользоваться стрелочками окна просмотра панорамы.
Создать свои собственные карты очень легко
Вы можете создавать свои собственные карты, добавляя к ним значки, линии, многоугольники и обзорныю информацию в виде форматированного текста, фотографий и видеороликов. Созданные карты могут быть сделаны доступными для всех. И разумеется, их можно просматривать в Google Earth.
Выбор дорожного маршрута
Карты Google помогут Вам выбрать маршрут для путешествия. Достаточно лишь указать пункты начала и завершения поездки и при желании задать несколько промежуточных пунктов.
Вместо заключения
После того, как мы познакомились с преимуществами цифровых карт, пришло время начать ими пользоваться. Благо карты Google доступны для всех и притом совершенно бесплатно. Понимаю, психика русского человека словами "бесплатно" давно уже травмирована - слишком много мышеловок с "бесплатным" сыром довелось повидать. Однако хватит жить "совками" - весь мир повышает свой уровень жизни за счет этих самых цифровых технологий, пора и нам решиться. Кстати, словосочетание "цифровые карты" или "электронная картография" существуют только в русском языке - в англоязычном интернете пишут просто "карты" или "набор картографических данных". За рубежом бумажные карты это раритет. Да и сами карты сейчас правильнее называть базами данных с географической привязкой. Так что Вы можете упираться, но цифровая эпоха берет свое. И еще позвольте развенчать миф о монопольном положении сервиса Google Maps - конкуренты есть, просто они не озаботились рассказать о своих сервисах на русском языке. Тот же Microsoft, к примеру. Но документацию от них я переводить не буду. Как пел небезысвестный бард, "я не люблю, когда мне лезут в душу, тем более, когда в нее плюют".
Для тех, кто оценил всю прелесть интерактивных карт Google Maps предлагаю обзор Google Mapplets: Концепция и примеры. Введение и решение некоторых часто встречающихся задач Google Maps в примерах.
воскресенье, 8 июля 2007 г.
Google Maps в примерах
Перепечатка запрещена.
После завершения обзорного цикла "Google Mapplets" появилось желание воспользоваться "продвинутыми" возможностями карт Google, причем сделать это "с изяществом". Дело в том, что Google Maps API развивается очень быстро и сегодня доступны возможности, которых не было вчера. Такая ситуация приводит к тому, что с каждым днем работать с картами Google становится легче, но интернет наполнен множеством устаревших примеров и идей. Потому я постараюсь выбрать самые интересные моменты из последней версии оригинальной документации и воплотить их в работающих примерах. Надеюсь вскоре порадовать Вас своими находками. Да, если Вы найдете интересные примеры, присылайте.
Пример 1. Отображение трэка в формате KML на карте.
Примечание: ничего, если трэк просто с GPS приемника, как поступить в этом случае я расскажу чуть позже, а пока читайте, не отвлекайтесь.
Рассмотрим ситуацию, когда у нас есть трэк и мы хотим увидеть его на карте. Только вот незадача - трэк есть, карты нет. И тратить время на поиск карты, ставить программы для просмотра этой карты нам ну вот совершенно не хочется. Раньше я в таких случаях запускал SagaGIS или QGIS (в некотором роде аналоги ESRI ArcView), долго думал, потом не менее долго искал подходящую карту на дисках (с винта давно удалил, в твердой уверенности, что ни на какую картографию время больше тратить не буду), потом открывал карту, мучительно вспоминая классификатор объектов (например, ppab - это дома, раскрасить под цвет подзола, vga - разная растительность, сделать светло-зеленым, dna - реки, оформить голубым, ...), после чего пару минут рассматривал то, что хотел посмотреть на карте и закрывал все до очередного раза. Не поверите, но мне это надоело. А теперь, пожалуйста, не смейтесь. Заходим на страничку
http://maps.google.com/ и в строчку перед кнопкой "Поиск по карте" вводим название своего файла, предварительно выложенного на любой сайт в интернет (например, можно создать свою группу Google и в ней выложить нужные файлы и создать сообщение с описанием файла и ссылкой на карту).
Жмем кнопку "Поиск на карте" и видим карту с отображенным на ней трэком! Гиперссылку с названием "Ссылка на эту страницу" можно скопировать и послать друзьям.
Отмечу, что работает все очень быстро, даже большой трэк Google отрисует моментально, главное, чтобы Ваш файл удалось скачать.
Пример 2. Отображение трэка с GPS навигатора на карте.
А что делать, если у нас трэк прямо с GPS приемника, в формате NMEA, GPX или другом? И в этом случае все прекрасно. Достаточно преобразовать трэк в формат KML. Для этого заходите вот на эту страничку: Конвертор для GPS-навигации.
Пример 3. Создание схемы проезда с отображением на карте точки назначения и описания с фотографией.
Отправляемся на сайт http://maps.google.com/ и щелкаем на вкладку "Мои карты". В открывшемся окне кликаем "Создать новую карту", указываем заголовок создаваемой карты (назвал заглавными буквами, с отображением строчных букв есть проблемы), мышкой центрируем карту как нам надо, потом вверху слева на карте выбираем инструмент с иконкой, похожей на воздушный шарик и щелкаем на карте. Теперь в открывшемся окне можно вставить html или rtf документ, а также текстовое содержимое. Я просто вставил в это окно гиперссылку на картинку. Теперь вверху справа в этом же окошке можно ткнуть на иконку с воздушным шариком и выбрать любой другой значок из списка. Готово! Нажав на гиперссылку "Ссылка на эту страницу" мы получим адрес созданной карты, которую можно послать в письме или выложить на сайте.
Вот что получилось у меня: "ПРОЕКТ GeoMapX: ПРИМЕР КАРТЫ". Если Вы щелкните на желтом значке с изображением домика на карте, появится окошко с информацией.
Кроме точек, на карту можно добавить линии и многоугольники, просто воспользуйтесь соответствующими инструментами. Созданные элементы можно перетаскивать, редактировать и удалять.
Продолжение следует...
После завершения обзорного цикла "Google Mapplets" появилось желание воспользоваться "продвинутыми" возможностями карт Google, причем сделать это "с изяществом". Дело в том, что Google Maps API развивается очень быстро и сегодня доступны возможности, которых не было вчера. Такая ситуация приводит к тому, что с каждым днем работать с картами Google становится легче, но интернет наполнен множеством устаревших примеров и идей. Потому я постараюсь выбрать самые интересные моменты из последней версии оригинальной документации и воплотить их в работающих примерах. Надеюсь вскоре порадовать Вас своими находками. Да, если Вы найдете интересные примеры, присылайте.
Пример 1. Отображение трэка в формате KML на карте.
Примечание: ничего, если трэк просто с GPS приемника, как поступить в этом случае я расскажу чуть позже, а пока читайте, не отвлекайтесь.
Рассмотрим ситуацию, когда у нас есть трэк и мы хотим увидеть его на карте. Только вот незадача - трэк есть, карты нет. И тратить время на поиск карты, ставить программы для просмотра этой карты нам ну вот совершенно не хочется. Раньше я в таких случаях запускал SagaGIS или QGIS (в некотором роде аналоги ESRI ArcView), долго думал, потом не менее долго искал подходящую карту на дисках (с винта давно удалил, в твердой уверенности, что ни на какую картографию время больше тратить не буду), потом открывал карту, мучительно вспоминая классификатор объектов (например, ppab - это дома, раскрасить под цвет подзола, vga - разная растительность, сделать светло-зеленым, dna - реки, оформить голубым, ...), после чего пару минут рассматривал то, что хотел посмотреть на карте и закрывал все до очередного раза. Не поверите, но мне это надоело. А теперь, пожалуйста, не смейтесь. Заходим на страничку
http://maps.google.com/ и в строчку перед кнопкой "Поиск по карте" вводим название своего файла, предварительно выложенного на любой сайт в интернет (например, можно создать свою группу Google и в ней выложить нужные файлы и создать сообщение с описанием файла и ссылкой на карту).
Жмем кнопку "Поиск на карте" и видим карту с отображенным на ней трэком! Гиперссылку с названием "Ссылка на эту страницу" можно скопировать и послать друзьям.
Отмечу, что работает все очень быстро, даже большой трэк Google отрисует моментально, главное, чтобы Ваш файл удалось скачать.
Пример 2. Отображение трэка с GPS навигатора на карте.
А что делать, если у нас трэк прямо с GPS приемника, в формате NMEA, GPX или другом? И в этом случае все прекрасно. Достаточно преобразовать трэк в формат KML. Для этого заходите вот на эту страничку: Конвертор для GPS-навигации.
Пример 3. Создание схемы проезда с отображением на карте точки назначения и описания с фотографией.
Отправляемся на сайт http://maps.google.com/ и щелкаем на вкладку "Мои карты". В открывшемся окне кликаем "Создать новую карту", указываем заголовок создаваемой карты (назвал заглавными буквами, с отображением строчных букв есть проблемы), мышкой центрируем карту как нам надо, потом вверху слева на карте выбираем инструмент с иконкой, похожей на воздушный шарик и щелкаем на карте. Теперь в открывшемся окне можно вставить html или rtf документ, а также текстовое содержимое. Я просто вставил в это окно гиперссылку на картинку. Теперь вверху справа в этом же окошке можно ткнуть на иконку с воздушным шариком и выбрать любой другой значок из списка. Готово! Нажав на гиперссылку "Ссылка на эту страницу" мы получим адрес созданной карты, которую можно послать в письме или выложить на сайте.
Вот что получилось у меня: "ПРОЕКТ GeoMapX: ПРИМЕР КАРТЫ". Если Вы щелкните на желтом значке с изображением домика на карте, появится окошко с информацией.
Кроме точек, на карту можно добавить линии и многоугольники, просто воспользуйтесь соответствующими инструментами. Созданные элементы можно перетаскивать, редактировать и удалять.
Продолжение следует...
пятница, 6 июля 2007 г.
Google Mapplets: Отличие "настоящих" маплетов от стандартного Maps API
После того, как мы научились создавать картографические приложения с помощью Google Maps API (см. Google Mapplets: Концепция и примеры. Практикум) пришло время обсудить некоторые тонкости, необходимые для успешной работы.
Напомню, что в предыдущих статьях я не делал различия между кодом "настоящего" маплета и просто кодом управления картой на веб-странице, поскольку считаю их двумя представлениями одной технологии. Однако в определенных случаях следует использовать именно "настоящие" маплеты, а для того, чтобы четко определять эти случаи, необходимо знать их отличительные особенности.
Как уже упоминалось в предыдущих статьях, маплеты используют функции для управления картой из стандартного Maps API, потому код маплета является вполне обычным способом использования Maps API. Однако есть несколько существенных отличий, которые заключены как в коде, так и в самой концепции.
Замечу от себя, что Google как раз знаменит своими новаторскими решениями, которые обыденные вроде вещи открывают для нас с неожиданной стороны. Потому рекомендую очень внимательно прочитать те идеи, которые сделали один из множества способов использования Maps API полноценной новой технологией.
Простая инициализация
Загрузка Javascript библиотеки функций происходит автоматически при обработке тэга
<Require feature="sharedmap"/>
Использование ключа сайта (API key) не требуется вовсе. При создании объекта GMap2 не надо указывать имя соответствующего ему элемента страницы, потому что в любом случае конструктор объекта возвращает указатель на главную карту. С другой стороны, если имя все же указано, ошибки не будет, что обеспечивает использование кода с обычной веб-страницы без необходимости его доработки.
Не требуется проверка браузера на совместимость (методом GBrowserIsCompatible) в силу того, что, если пользователь уже загрузил Ваш маплет, то наверняка он использует совместимый браузер. Такой метод исключен из функциональности маплета за ненадобностью.
Дополнительные возможности исключены
Чтобы пользователи намеренно или случайно не искажали идею работы с картами Google, запрещено отключение функций перемещения, масштабирования и других. Сделано это для того, чтобы недобросовестные разработчики не усложняли пользователям жизнь. Google заботится о том, чтобы обеспечить единый стандарт работы с картографическими сервисами и разработчики маплетов должны следовать этому стандарту.
Асинхронная работа с картой
Обмен данными между маплетом и сервером карт Google Maps происходит асинхронно. В результате, часть методов работы с картой имеет более сложную внутреннюю реализацию. Обыкновенно операции, выполняющие модификацию отображаемой карты (в том числе setCenter() и addOverlay()) идентичны их реализации в стандартном Maps API. Однако получение информации с карты реализовано через функции обратного вызова. В маплетах добавлен постфикс "Async" к именам всех написанных таким образом вызовов методов Maps API, при этом их возвращаемое значение передается как аргумент функции обратного вызова.
Например, используя Maps API, мы напишем вот так:
Если же этот код вызывается в маплете, он будет представлен следующим образом:
Вопросы безопасности и "обеззараживание" содержимого в окне информации
Маплет выполняется в элементе страницы iframe и "заперт" в нем, а потому не имеет возможности украсть файлы куки пользователя или нарушить выполнение основного Javascript кода Google Maps. В то же время, окно информации запускается в контексте домена Google Maps. Чтобы избежать возможной угрозы безопасности, проводится очистка отображаемого в окне информации содержимого от потенциально небезопасных элементов. Блокируется использование кода Javascript и удаляются все элементы HTML и CSS, не входящие в список разрешенных.
Более того, запрещено выполнение таких операций, как добавление новых элементов управления картой и новых типов карт, поскольку для них требуется выполнение постороннего кода Javascript в контексте карты.
Запросы к удаленным данным проходят через сервера Google
Маплеты размещаются на сайте gmodules.com. Поскольку это сервер Google, метод GDownloadUrl (и часто используемый для обработки полученного XML содержимого метод GXml) не могут получить доступ к данным на Вашем сервере.
Вместо этого Google Gadgets API обеспечивает следующие вызовы для получения удаленных данных через прокси-сервер gmodules.com:
Вы должны знать некоторые отличия между GDownloadUrl и GXml:
Вместо заключения
Думал сделать перевод, а получилось скорее даже "по мотивам". Более того, я изменил саму идею повествования - вместо того, чтобы рассказывать об отличиях "настоящего" маплета от простого маплета, я говорил... об их сходстве. Зато если Вы внимательно читали, то теперь Вы умеете работать с обеими технологиями и быстро адаптировать одну в другую. В оригинале я об этом не нашел информации, а меня самого этот вопрос очень интересовал - ведь раз есть уже много готовых примеров работы с маплетами, зачем делать все с самого начала, когда можно просто адаптировать готовый код. Или если мы увидим интересный "настоящий" маплет на сайте Google, почему бы не разместить такой же сервис на своем сайте, внеся необходимые нам усовершенствования. Если компания Google сочтет сказанное мной в чем-то отличным от истинного положения дел и намерений компании, я охотно внесу необходимые изменения. От себя скажу, что переводить очень нелегко, так как мышление русскоязычной аудитории весьма специфично, хотя бы тем, что "наш зритель" желает знать в подробностях лежащие в основе идеи, способы использования и вообще очень инициативен и подходит творчески, что требует более глубокого рассказа, чем это сделано в оригинальной документации. Насколько это мне удалось - судить Вам.
Цикл обзорных статей по теме "Google Mapplets" завершен, еще некоторое время я буду подчищать текст и вносить дополнения, ориентируясь на комментарии читателей. Переводить детальную документацию для разработчиков не вижу смысла, желающие могут все прочитать в оригинале, какого-то особенного знания английского языка для этого не требуется (зачастую все понятно при беглом взгляде, даже без чтения описания). Планирую продолжить повествование циклами "Формат KML" и "Google Earth". Скорее всего, подробно рассмотрю тему GPS-навигации, как минимум для отображения данных с удаленного GPS-терминала, передаваемых в формате NMEA, а возможно, коснусь и работы с локальными GPS-приемниками Garmin и Magellan (самые популярные марки навигаторов в нашей стране). Если удастся собрать отзывы о том, какие задачи хотят решать пользователи с помощью представленных технологий, тогда сделаю одну или несколько тематических подборок своих решений названных задач. О сроках реализации задуманного ничего заранее сказать не могу, все зависит от того, когда смогу найти свободное время.
P.S. Посмотрел на документацию еще раз, возникло несколько идей, так что в ближайшее время ждите руководство "Google Maps в примерах".
Напомню, что в предыдущих статьях я не делал различия между кодом "настоящего" маплета и просто кодом управления картой на веб-странице, поскольку считаю их двумя представлениями одной технологии. Однако в определенных случаях следует использовать именно "настоящие" маплеты, а для того, чтобы четко определять эти случаи, необходимо знать их отличительные особенности.
Как уже упоминалось в предыдущих статьях, маплеты используют функции для управления картой из стандартного Maps API, потому код маплета является вполне обычным способом использования Maps API. Однако есть несколько существенных отличий, которые заключены как в коде, так и в самой концепции.
Замечу от себя, что Google как раз знаменит своими новаторскими решениями, которые обыденные вроде вещи открывают для нас с неожиданной стороны. Потому рекомендую очень внимательно прочитать те идеи, которые сделали один из множества способов использования Maps API полноценной новой технологией.
Простая инициализация
Загрузка Javascript библиотеки функций происходит автоматически при обработке тэга
<Require feature="sharedmap"/>
Использование ключа сайта (API key) не требуется вовсе. При создании объекта GMap2 не надо указывать имя соответствующего ему элемента страницы, потому что в любом случае конструктор объекта возвращает указатель на главную карту. С другой стороны, если имя все же указано, ошибки не будет, что обеспечивает использование кода с обычной веб-страницы без необходимости его доработки.
Не требуется проверка браузера на совместимость (методом GBrowserIsCompatible) в силу того, что, если пользователь уже загрузил Ваш маплет, то наверняка он использует совместимый браузер. Такой метод исключен из функциональности маплета за ненадобностью.
Дополнительные возможности исключены
Чтобы пользователи намеренно или случайно не искажали идею работы с картами Google, запрещено отключение функций перемещения, масштабирования и других. Сделано это для того, чтобы недобросовестные разработчики не усложняли пользователям жизнь. Google заботится о том, чтобы обеспечить единый стандарт работы с картографическими сервисами и разработчики маплетов должны следовать этому стандарту.
Асинхронная работа с картой
Обмен данными между маплетом и сервером карт Google Maps происходит асинхронно. В результате, часть методов работы с картой имеет более сложную внутреннюю реализацию. Обыкновенно операции, выполняющие модификацию отображаемой карты (в том числе setCenter() и addOverlay()) идентичны их реализации в стандартном Maps API. Однако получение информации с карты реализовано через функции обратного вызова. В маплетах добавлен постфикс "Async" к именам всех написанных таким образом вызовов методов Maps API, при этом их возвращаемое значение передается как аргумент функции обратного вызова.
Например, используя Maps API, мы напишем вот так:
var zoom = map.getZoom();
alert("Текущий масштабный множитель равен " + zoom);
alert("Это сообщение Вы увидите ПОСЛЕ сообщения о значении масштабного множителя");
Если же этот код вызывается в маплете, он будет представлен следующим образом:
map.getZoomAsync(function(zoom) {
alert("Текущий масштабный множитель равен " + zoom);
});
alert("Это сообщение Вы увидите ДО или ПОСЛЕ сообщения о значении масштабного множителя");
Вопросы безопасности и "обеззараживание" содержимого в окне информации
Маплет выполняется в элементе страницы iframe и "заперт" в нем, а потому не имеет возможности украсть файлы куки пользователя или нарушить выполнение основного Javascript кода Google Maps. В то же время, окно информации запускается в контексте домена Google Maps. Чтобы избежать возможной угрозы безопасности, проводится очистка отображаемого в окне информации содержимого от потенциально небезопасных элементов. Блокируется использование кода Javascript и удаляются все элементы HTML и CSS, не входящие в список разрешенных.
Более того, запрещено выполнение таких операций, как добавление новых элементов управления картой и новых типов карт, поскольку для них требуется выполнение постороннего кода Javascript в контексте карты.
Запросы к удаленным данным проходят через сервера Google
Маплеты размещаются на сайте gmodules.com. Поскольку это сервер Google, метод GDownloadUrl (и часто используемый для обработки полученного XML содержимого метод GXml) не могут получить доступ к данным на Вашем сервере.
Вместо этого Google Gadgets API обеспечивает следующие вызовы для получения удаленных данных через прокси-сервер gmodules.com:
- _IG_FetchContent(url, callback) - Возвращает текстовое содержимое указанного адреса. Функция используется для работы с документами HTML.
- _IG_FetchXMLContent(url, callback) - Возвращает XML содержимое указанного адреса и оперирует с полученными данными XML как с объектом DOM.
Вы должны знать некоторые отличия между GDownloadUrl и GXml:
- Метод _IG_FetchXXX может получить данные с любого вебсайта в интернет.
- Метод _IG_FetchXMLContent более специализированный, чем GXml, и работает только с файлами XML следующего типа
<?xml version="1.0" encoding="UTF-8"?> - Метод _IG_FetchXXX автоматически кэширует контент для уменьшения нагрузки на Ваши серверы. Для изменения интервала кэширования или полного отключения кэширования смотрите секцию Refreshing the Cache в документации на Gadgets API.
Вместо заключения
Думал сделать перевод, а получилось скорее даже "по мотивам". Более того, я изменил саму идею повествования - вместо того, чтобы рассказывать об отличиях "настоящего" маплета от простого маплета, я говорил... об их сходстве. Зато если Вы внимательно читали, то теперь Вы умеете работать с обеими технологиями и быстро адаптировать одну в другую. В оригинале я об этом не нашел информации, а меня самого этот вопрос очень интересовал - ведь раз есть уже много готовых примеров работы с маплетами, зачем делать все с самого начала, когда можно просто адаптировать готовый код. Или если мы увидим интересный "настоящий" маплет на сайте Google, почему бы не разместить такой же сервис на своем сайте, внеся необходимые нам усовершенствования. Если компания Google сочтет сказанное мной в чем-то отличным от истинного положения дел и намерений компании, я охотно внесу необходимые изменения. От себя скажу, что переводить очень нелегко, так как мышление русскоязычной аудитории весьма специфично, хотя бы тем, что "наш зритель" желает знать в подробностях лежащие в основе идеи, способы использования и вообще очень инициативен и подходит творчески, что требует более глубокого рассказа, чем это сделано в оригинальной документации. Насколько это мне удалось - судить Вам.
Цикл обзорных статей по теме "Google Mapplets" завершен, еще некоторое время я буду подчищать текст и вносить дополнения, ориентируясь на комментарии читателей. Переводить детальную документацию для разработчиков не вижу смысла, желающие могут все прочитать в оригинале, какого-то особенного знания английского языка для этого не требуется (зачастую все понятно при беглом взгляде, даже без чтения описания). Планирую продолжить повествование циклами "Формат KML" и "Google Earth". Скорее всего, подробно рассмотрю тему GPS-навигации, как минимум для отображения данных с удаленного GPS-терминала, передаваемых в формате NMEA, а возможно, коснусь и работы с локальными GPS-приемниками Garmin и Magellan (самые популярные марки навигаторов в нашей стране). Если удастся собрать отзывы о том, какие задачи хотят решать пользователи с помощью представленных технологий, тогда сделаю одну или несколько тематических подборок своих решений названных задач. О сроках реализации задуманного ничего заранее сказать не могу, все зависит от того, когда смогу найти свободное время.
P.S. Посмотрел на документацию еще раз, возникло несколько идей, так что в ближайшее время ждите руководство "Google Maps в примерах".
среда, 4 июля 2007 г.
Google Mapplets: Концепция и примеры. Практикум
К настоящему моменту мы уже попробовали работать с картами Google (см. статью Google Mapplets: Начинаем работу), вошли во вкус и убедились, что предоставляемые Google Maps API возможности делают создание картографических сервисов как никогда простым и доступным для всех желающих. А раз так, и мы за первые же полчаса знакомства с новым сервисом смогли разместить карту на своем сайте, стоит подробнее остановиться на том, что еще мы можем разместить на нашей карте. Для того, чтобы мы могли с гордостью говорить "наша карта", надо к карте Google добавить хоть немного от нас самих. Например, поставить флажок "здесь был я". И еще оформить этот флажок так, чтобы каждый догадался, что я это именно я, а не кто-то другой. Спасибо Google, они предвосхитили наше скромное желание осчастливить современников столь ценной информацией и предоставили подробное описание. Правда, на английском, но это не вопрос, сейчас мы быстренько переведем и тут же воспользуемся советами.
В нижеследующих примерах мы будем приводить только код JavaScript. Вы можете вставить его в XML описание маплета и опубликовать в Google или вставить в обычную html страницу и использовать на своем сайте. После каждого примера мы будем давать ссылку на полный файл спецификации маплета в формате XML.
Очень простой пример
Следующий код показывает карту с центральной точкой в Пало Альто, Калифорния и устанавливает масштабный коэффициент в значение 13.
Скачать basics.xml.
Объект GLatLng представляет точку на карте, заданную координатами в формате (широта,долгота). Здесь lat сокращение от latitude (широта) и lng - от longitude (долгота). Для долготы обычно используется сокращение lon, так что если на GPS навигаторе или где-то еще увидите аббревиатуру lon, то знайте, что это в точности то же самое, что Google называет lng. Если Вы не знаете координат интересующей Вас точки, Вы можете воспользоваться операцией геокодирования для определения координат искомого места по его адресу. Эта операция будет рассмотрена ниже. От себя могу рекомендовать запустить Google Earth, найти нужное место и навести на него указатель, после чего внизу карты отобразятся искомые координаты. Также можно получить координаты с GPS-приемника. Если у Вас нет GPS-навигатора или Вы еще не успели посетить интересующее Вас место, можете найти подходящий трэк в интернете. Последний способ подходит для любителей геокэшинга и подобных забав, когда по космоснимкам и картам сориентироваться сложно и проще определить искомую точку на местности.
Перемещение и анимация карты
Следующий пример устанавливает центр карты в Пало Альто, ожидает 2 секунды и перемещает карту.
Метод panTo центрирует карту в указанной точке. Если эта точка находится в видимой части карты, карта перемещается плавно, а если точка на карте не видна, происходит "перескок".
Скачать movement.xml.
Добавление окна информации
Для создание информационного окна следует вызвать метод openInfoWindowHtml, передав ему в качестве аргументов позицию и отображаемый гипертекст. Нижеследующий пример показывает окно информации, привязанное к центру карты с простым сообщением "Hello World".
Скачать infowindow.xml.
Добавление меток
Пример отображает 10 отметок в случайных позициях на карте.
Скачать markers.xml.
Рисование ломаных линий (полилиний)
Предлагаемый пример рисует ломаную линию по 5-ти случайным точкам. Линия оформлена красным цветом, шириной 5 пикселов и с прозрачностью 70%.
Скачать polyline.xml.
Рисование многоугольника (полигона)
В примере рисуется многоугольник с 3-мя случайными вершинами. Обрамляющая линия красного цвета, шириной 5 пикселей, прозрачность 70%. Многоугольник закрашен синим цветом с прозрачностью 40%.
Скачать polygon.xml.
Обработка событий
Для обработки событий используется метод GEvent.addListener. Аргументы этого метода следующие: карта, обрабатываемое событие и вызываемая при инициировании события функция. Наш пример отображает широту и долготу центра карты после перемещения карты пользователем.
Скачать events.xml.
Обработка клика
Чтобы обработать событие, происходящее при клике пользователя на карте нужно зарегистрировать обработчик события "click" в экземпляре объекта GMap2. При инициировании события его обработчик получает два аргумента: метка (если пользователь щелкнул на метке, если метки нет, то аргумент имеет значение null) и объект GLatLng с координатами точки клика на карте.
Примечание: Метки это встроенные дополнительные слои, которые поддерживают событие "click". Другие типы слоев, например, GPolyline, на клики не реагируют.
Продемонстрируем создание (если в точки клика нет метки) и удаление (если в точке клика уже есть метка) меток на карте следующим примером.
Скачать clicks.xml.
Отображения окна информации после клика на метке
В этом примере мы показываем собственное окно с информацией для каждого маркера после клика на нем. Мы воспользуемся отдельной функцией JavaScript для отображения собственного содержимого в окне информации для каждого маркера.
Скачать markerinfowindow.xml.
По умолчанию внизу каждого окна информации отображаются дополнительные ссылки, такие, как направление движения и локальный поиск. Если Вы не хотите показывать эти ссылки, установите значение необязательной переменной disableGoogleLinks равным true для всех или некоторых окон информации.
Скачать markerinfowindowsnolinks.xml.
Использование собственных иконок для меток
В приведенном ниже примеры мы создадим новый тип иконки, используя маркеры типа Google Ride Finder "mini". Для иконок укажем выводимое изображение, затененное изображение, позицию привязки иконки к объектам карты и размещение окна информации относительно иконки.
Скачать icon.xml.
Использование классов иконок
Во многих случаях Вы можете захотеть использовать иконки с разными картинками, но одинаковым оформлением. Простой путь для достижение такого результата это создание копии иконки методом из класса GIcon и дальнейшая настройка нужных параметров.
Скачать iconclass.xml.
Перетаскиваемые метки
Перетаскиваемые метки это интерактивные объекты, на которых можно кликать и перетаскивать в новое место. Приведем пример размещения перетаскиваемой метки на карте и обработки событий. Метки такого типа реагируют на три типа событий - клик (click), начало перетаскивания (dragstart) и завершение перетаскивания (dragend). По умолчанию создаваемые метки чувствительны к клику, но их нельзя перетаскивать. Для того, чтобы метку можно было перетаскивать, необходимо установить значение true для соответствующего свойства, именуемого draggable. Перетаскиваемые метки по умолчанию подвижны, это поведение можно отключить, если установить свойство bouncy равным false.
Скачать draggablemarker.xml.
Получение данных с другого сайта
Для получения данных с другого сайта можно воспользоваться любым из вызовов Google Gadgets API:
Предположим, Вы разместили по адресу http://mapgadgets.googlepages.com/cta_red.xml следующий файл с описанием в формате XML набора координат. Некоторые точки имеют названия, остальные безымянные.
Воспользуемся методом _IG_FetchXmlContent() для получения и разбора XML файла, после чего нарисуем линию и добавим метки для каждой именованной точки.
Скачать remotecontent.xml.
Примечание: Метод _IG_FetchXXX автоматически кэширует контент для уменьшения нагрузки на Ваши серверы. Для изменения интервала кэширования или полного отключения кэширования смотрите секцию Refreshing the Cache в документации на Gadgets API.
Этот способ работает только для "настоящих" маплетов, но мы его все равно использовать не будем, поскольку то же самое можно сделать намного проще, как будет описано ниже.
Добавление слоев KML и GeoRSS
Вместо того, чтобы добавлять точки программно на Javascript, рекомендуется сохранять данные в форматах KML или GeoRSS и оперировать ими как целыми наборами, не занимаясь отрисовкой каждой точки по отдельности. Для представления KML или GeoRSS слоев существует специальный класс GGeoXml. Объекты типа GGeoXml добавляются на карту методом addOverlay и удаляются методом removeOverlay.
В нижеследующем примере мы отобразим на карте список точек из файла http://mapgadgets.googlepages.com/cta.kml. Заметьте, насколько этот способ проще, чем предыдущий пример, когда мы делали это вручную с помощью функции _IG_FetchXmlContent.
Скачать ggeoxml.xml.
Геокодирование
Для выполнения операции геокодирования на языке JavaScript доступен объект типа GClientGeocoder. Метод getLatLng применяется для трансляции адреса в объект GLatLng. Геокодирование требует отправки специального запроса на сервер Google, что требует некоторого времени. Для предотвращения зависания приложения на время отправки запроса применяется функция обратного вызова, которая будет выполнена после получения результата запроса. В примере ниже мы геокодируем адрес, добавляем метку в нужную точку и отображаем информационное окно с адресом.
Скачать geocoding.xml.
Для получения информации о прямом доступе к геокодеру смотрите секцию Geocoding HTTP Request в стандартном Google Maps API.
Сохранение настроек пользователя
Метод setprefs из Google Gadgets API позволяет сохранять настройки пользователя в течении сеанса работы и между сеансами. Чтобы эта возможность была доступна, необходимо включить в маплет тэг <Require feature="setprefs"/> внутри тэга <ModulePrefs> для того, чтобы была загружена библиотека работы с пользовательским настройками (setprefs library).
Программно сохранить нужное значение можно с помощью тэга
<UserPref>. Можно запретить пользователю редактировать это значение, установив его тип равным "hidden".
Создание объекта, содержащего методы установки и получения значений настроек пользователя, производится вызовом конструктора _IG_Prefs(__MODULE_ID__).
Подробная информация о способах управления настройками пользователя приведена в секции Working with Userpref Data Types в документации Google Gadgets API.
Приведем простой пример, который отображает кнопки для увеличения и сброса значения счетчика. Если Вы перезагрузите маплет, то убедитесь, что значение счетчика сохранилось.
Скачать setprefs.xml.
Следующая статья научит нас правильно создавать "настоящие" маплеты и расскажет об отличиях таких маплетов от стандартного использования Google Maps API. Читаем Google Mapplets: Отличие "настоящих" маплетов от стандартного Maps API.
В нижеследующих примерах мы будем приводить только код JavaScript. Вы можете вставить его в XML описание маплета и опубликовать в Google или вставить в обычную html страницу и использовать на своем сайте. После каждого примера мы будем давать ссылку на полный файл спецификации маплета в формате XML.
Очень простой пример
Следующий код показывает карту с центральной точкой в Пало Альто, Калифорния и устанавливает масштабный коэффициент в значение 13.
var map = new GMap2();
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Скачать basics.xml.
Объект GLatLng представляет точку на карте, заданную координатами в формате (широта,долгота). Здесь lat сокращение от latitude (широта) и lng - от longitude (долгота). Для долготы обычно используется сокращение lon, так что если на GPS навигаторе или где-то еще увидите аббревиатуру lon, то знайте, что это в точности то же самое, что Google называет lng. Если Вы не знаете координат интересующей Вас точки, Вы можете воспользоваться операцией геокодирования для определения координат искомого места по его адресу. Эта операция будет рассмотрена ниже. От себя могу рекомендовать запустить Google Earth, найти нужное место и навести на него указатель, после чего внизу карты отобразятся искомые координаты. Также можно получить координаты с GPS-приемника. Если у Вас нет GPS-навигатора или Вы еще не успели посетить интересующее Вас место, можете найти подходящий трэк в интернете. Последний способ подходит для любителей геокэшинга и подобных забав, когда по космоснимкам и картам сориентироваться сложно и проще определить искомую точку на местности.
Перемещение и анимация карты
Следующий пример устанавливает центр карты в Пало Альто, ожидает 2 секунды и перемещает карту.
Метод panTo центрирует карту в указанной точке. Если эта точка находится в видимой части карты, карта перемещается плавно, а если точка на карте не видна, происходит "перескок".
var map = new GMap2();
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
window.setTimeout(function() {
map.panTo(new GLatLng(37.4569, -122.1569));
}, 2000);
Скачать movement.xml.
Добавление окна информации
Для создание информационного окна следует вызвать метод openInfoWindowHtml, передав ему в качестве аргументов позицию и отображаемый гипертекст. Нижеследующий пример показывает окно информации, привязанное к центру карты с простым сообщением "Hello World".
var map = new GMap2();
map.getCenterAsync(function(center) {
map.openInfoWindowHtml(center, "Hello World");
});
Скачать infowindow.xml.
Добавление меток
Пример отображает 10 отметок в случайных позициях на карте.
var map = new GMap2();
map.getBoundsAsync(function(bounds) {
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
});
Скачать markers.xml.
Рисование ломаных линий (полилиний)
Предлагаемый пример рисует ломаную линию по 5-ти случайным точкам. Линия оформлена красным цветом, шириной 5 пикселов и с прозрачностью 70%.
var map = new GMap2();
map.getBoundsAsync(function(bounds) {
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var points = [];
for (var i = 0; i < 5; i++) {
points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()));
}
map.addOverlay(new GPolyline(points, "#ff0000", 5, 0.7));
});
Скачать polyline.xml.
Рисование многоугольника (полигона)
В примере рисуется многоугольник с 3-мя случайными вершинами. Обрамляющая линия красного цвета, шириной 5 пикселей, прозрачность 70%. Многоугольник закрашен синим цветом с прозрачностью 40%.
var map = new GMap2();
map.getBoundsAsync(function(bounds) {
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var points = [];
for (var i = 0; i < 3; i++) {
points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()));
}
points.push(points[0]); // Close the polygon
map.addOverlay(new GPolygon(points, "#ff0000", 5, 0.7, "#0000ff", 0.4));
});
Скачать polygon.xml.
Обработка событий
Для обработки событий используется метод GEvent.addListener. Аргументы этого метода следующие: карта, обрабатываемое событие и вызываемая при инициировании события функция. Наш пример отображает широту и долготу центра карты после перемещения карты пользователем.
var map = new GMap2();
GEvent.addListener(map, "moveend", function() {
map.getCenterAsync(function(center) {
map.openInfoWindowHtml(center, center.toString());
});
});
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Скачать events.xml.
Обработка клика
Чтобы обработать событие, происходящее при клике пользователя на карте нужно зарегистрировать обработчик события "click" в экземпляре объекта GMap2. При инициировании события его обработчик получает два аргумента: метка (если пользователь щелкнул на метке, если метки нет, то аргумент имеет значение null) и объект GLatLng с координатами точки клика на карте.
Примечание: Метки это встроенные дополнительные слои, которые поддерживают событие "click". Другие типы слоев, например, GPolyline, на клики не реагируют.
Продемонстрируем создание (если в точки клика нет метки) и удаление (если в точке клика уже есть метка) меток на карте следующим примером.
var map = new GMap2();
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));
}
});
Скачать clicks.xml.
Отображения окна информации после клика на метке
В этом примере мы показываем собственное окно с информацией для каждого маркера после клика на нем. Мы воспользуемся отдельной функцией JavaScript для отображения собственного содержимого в окне информации для каждого маркера.
var map = new GMap2();
// Creates a marker at the given point with the given number label
function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker #" + number);
});
return marker;
}
// Add 10 markers to the map at random locations
map.getBoundsAsync(function(bounds) {
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}
});
Скачать markerinfowindow.xml.
По умолчанию внизу каждого окна информации отображаются дополнительные ссылки, такие, как направление движения и локальный поиск. Если Вы не хотите показывать эти ссылки, установите значение необязательной переменной disableGoogleLinks равным true для всех или некоторых окон информации.
marker.openInfoWindowHtml("Marker #" + number, {disableGoogleLinks:true});
Скачать markerinfowindowsnolinks.xml.
Использование собственных иконок для меток
В приведенном ниже примеры мы создадим новый тип иконки, используя маркеры типа Google Ride Finder "mini". Для иконок укажем выводимое изображение, затененное изображение, позицию привязки иконки к объектам карты и размещение окна информации относительно иконки.
var map = new GMap2();
// Create our "tiny" marker icon
var tinyIcon = new GIcon();
tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
tinyIcon.iconSize = new GSize(12, 20);
tinyIcon.shadowSize = new GSize(22, 20);
tinyIcon.iconAnchor = new GPoint(6, 20);
tinyIcon.infoWindowAnchor = new GPoint(5, 1);
// Add 10 markers to the map at random locations
map.getBoundsAsync(function(bounds) {
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point, {icon:tinyIcon}));
}
});
Скачать icon.xml.
Использование классов иконок
Во многих случаях Вы можете захотеть использовать иконки с разными картинками, но одинаковым оформлением. Простой путь для достижение такого результата это создание копии иконки методом из класса GIcon и дальнейшая настройка нужных параметров.
var map = new GMap2();
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
// Creates a marker whose info window displays the letter corresponding
// to the given index.
function createMarker(point, index) {
// Create a lettered icon for this point using our icon class
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var letterIcon = new GIcon(baseIcon);
letterIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
return new GMarker(point, {icon:letterIcon});
}
// Add markers A - J to the map at random locations
map.getBoundsAsync(function(bounds) {
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i));
}
});
Скачать iconclass.xml.
Перетаскиваемые метки
Перетаскиваемые метки это интерактивные объекты, на которых можно кликать и перетаскивать в новое место. Приведем пример размещения перетаскиваемой метки на карте и обработки событий. Метки такого типа реагируют на три типа событий - клик (click), начало перетаскивания (dragstart) и завершение перетаскивания (dragend). По умолчанию создаваемые метки чувствительны к клику, но их нельзя перетаскивать. Для того, чтобы метку можно было перетаскивать, необходимо установить значение true для соответствующего свойства, именуемого draggable. Перетаскиваемые метки по умолчанию подвижны, это поведение можно отключить, если установить свойство bouncy равным false.
var map = new GMap2();
var center = new GLatLng(37.4419, -122.1419);
map.setCenter(center, 13);
var marker = new GMarker(center, {draggable: true, bouncy: true});
map.addOverlay(marker);
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("Just bouncing along...");
});
Скачать draggablemarker.xml.
Получение данных с другого сайта
Для получения данных с другого сайта можно воспользоваться любым из вызовов Google Gadgets API:
- _IG_FetchContent(url, callback) - Возвращает текстовое содержимое указанного адреса. Функция используется для работы с документами HTML.
- _IG_FetchXMLContent(url, callback) - Возвращает XML содержимое указанного адреса и оперирует с полученными данными XML как с объектом DOM.
Предположим, Вы разместили по адресу http://mapgadgets.googlepages.com/cta_red.xml следующий файл с описанием в формате XML набора координат. Некоторые точки имеют названия, остальные безымянные.
<?xml version="1.0" encoding="UTF-8" ?>
<points>
<point lng="-87.67283499240875" lat="42.019110918045044">Howard</point>
<point lng="-87.66907453536987" lat="42.01585473134908">Jarvis</point>
<point lng="-87.66744375228882" lat="42.014483688722116" />
<point lng="-87.66716480255127" lat="42.014228607763144" />
<point lng="-87.66695022583008" lat="42.01400541108485" />
<point lng="-87.66682147979736" lat="42.01379815632509" />
<point lng="-87.66662836074829" lat="42.01357495813621" />
<point lng="-87.66645669937134" lat="42.0133198735327" />
<point lng="-87.66634941101074" lat="42.013080730787806" />
<point lng="-87.66611337661743" lat="42.01263432859157" />
<point lng="-87.6660704612732" lat="42.012283581810934" />
<point lng="-87.66602754592896" lat="42.01188500357604" />
<point lng="-87.66602754592896" lat="42.008010693009815">Morse</point>
<!-- ... -->
</points>
Воспользуемся методом _IG_FetchXmlContent() для получения и разбора XML файла, после чего нарисуем линию и добавим метки для каждой именованной точки.
var map = new GMap2();
// Go to Chicago
map.setCenter(new GLatLng(41.882853, -87.642059), 11);
// Render the red train line and stations from a remote XML file
var url = "http://mapgadgets.googlepages.com/cta_red.xml";
_IG_FetchXmlContent(url, function(response) {
var trainline = [];
var points = response.getElementsByTagName("point");
for (var i = 0; i < points.length; i++) {
var point = points.item(i);
var lat = point.getAttribute("lat");
var lng = point.getAttribute("lng");
var latlng = new GLatLng(lat, lng);
trainline.push(latlng);
if (point.firstChild) {
var station = point.firstChild.nodeValue;
var marker = createMarker(latlng, station);
map.addOverlay(marker);
}
}
var polyline = new GPolyline(trainline, "#ff0000", 3, 1);
map.addOverlay(polyline);
});
// Creates a marker at the given point with the given name
function createMarker(point, name) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(name);
});
return marker;
}
Скачать remotecontent.xml.
Примечание: Метод _IG_FetchXXX автоматически кэширует контент для уменьшения нагрузки на Ваши серверы. Для изменения интервала кэширования или полного отключения кэширования смотрите секцию Refreshing the Cache в документации на Gadgets API.
Этот способ работает только для "настоящих" маплетов, но мы его все равно использовать не будем, поскольку то же самое можно сделать намного проще, как будет описано ниже.
Добавление слоев KML и GeoRSS
Вместо того, чтобы добавлять точки программно на Javascript, рекомендуется сохранять данные в форматах KML или GeoRSS и оперировать ими как целыми наборами, не занимаясь отрисовкой каждой точки по отдельности. Для представления KML или GeoRSS слоев существует специальный класс GGeoXml. Объекты типа GGeoXml добавляются на карту методом addOverlay и удаляются методом removeOverlay.
В нижеследующем примере мы отобразим на карте список точек из файла http://mapgadgets.googlepages.com/cta.kml. Заметьте, насколько этот способ проще, чем предыдущий пример, когда мы делали это вручную с помощью функции _IG_FetchXmlContent.
var map = new GMap2();
var geoXml = new GGeoXml("http://mapgadgets.googlepages.com/cta.kml");
map.setCenter(new GLatLng(41.882853, -87.642059), 11);
map.addOverlay(geoXml);
Скачать ggeoxml.xml.
Геокодирование
Для выполнения операции геокодирования на языке JavaScript доступен объект типа GClientGeocoder. Метод getLatLng применяется для трансляции адреса в объект GLatLng. Геокодирование требует отправки специального запроса на сервер Google, что требует некоторого времени. Для предотвращения зависания приложения на время отправки запроса применяется функция обратного вызова, которая будет выполнена после получения результата запроса. В примере ниже мы геокодируем адрес, добавляем метку в нужную точку и отображаем информационное окно с адресом.
var map = new GMap2();
var geocoder = new GClientGeocoder();
showAddress("76 9th ave new york");
function showAddress(address) {
geocoder.getLatLngAsync(
address,
function(latlng) {
if (!latlng) {
alert(address + " not found");
} else {
map.setCenter(latlng, 15);
var marker = new GMarker(latlng);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
Скачать geocoding.xml.
Для получения информации о прямом доступе к геокодеру смотрите секцию Geocoding HTTP Request в стандартном Google Maps API.
Сохранение настроек пользователя
Метод setprefs из Google Gadgets API позволяет сохранять настройки пользователя в течении сеанса работы и между сеансами. Чтобы эта возможность была доступна, необходимо включить в маплет тэг <Require feature="setprefs"/> внутри тэга <ModulePrefs> для того, чтобы была загружена библиотека работы с пользовательским настройками (setprefs library).
Программно сохранить нужное значение можно с помощью тэга
<UserPref>. Можно запретить пользователю редактировать это значение, установив его тип равным "hidden".
Создание объекта, содержащего методы установки и получения значений настроек пользователя, производится вызовом конструктора _IG_Prefs(__MODULE_ID__).
Подробная информация о способах управления настройками пользователя приведена в секции Working with Userpref Data Types в документации Google Gadgets API.
Приведем простой пример, который отображает кнопки для увеличения и сброса значения счетчика. Если Вы перезагрузите маплет, то убедитесь, что значение счетчика сохранилось.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs
title="Set Userprefs Demo">
<Require feature="sharedmap" />
<Require feature="setprefs" />
</ModulePrefs>
<UserPref
name="counter"
default_value="0"
datatype="hidden"/>
<Content type="html">
<![CDATA[
<input type=button value="Increment Counter" onClick="incrementCounter();">
<input type=button value="Reset Counter" onClick="resetCounter();">
<div id="message" style="margin-top:1em"></span>
<script>
// Get user preferences
var prefs = new _IG_Prefs(__MODULE_ID__);
var message = document.getElementById("message");
showCounter();
// Show the current value of the counter
function showCounter() {
var counter = prefs.getInt("counter");
message.innerHTML = "The counter value is " + counter;
}
// Increment value of "counter" user preference
function incrementCounter() {
var counter = prefs.getInt("counter");
prefs.set("counter", counter + 1);
showCounter();
}
// Reset value of "counter" userpref to 0
function resetCounter(){
prefs.set("counter", 0);
showCounter();
}
</script>
]]>
</Content>
</Module>
Скачать setprefs.xml.
Следующая статья научит нас правильно создавать "настоящие" маплеты и расскажет об отличиях таких маплетов от стандартного использования Google Maps API. Читаем Google Mapplets: Отличие "настоящих" маплетов от стандартного Maps API.
Подписаться на:
Сообщения (Atom)
