вторник, 31 июля 2007 г.

Настройка шрифтов в mapserver (mapserver fonts howto)

Статистика сайта мне подсказывает, что этот вопрос интересует посетителей. Интересно, почему, ведь в этом нет ничего сложного. Впрочем, не все могут иметь опыт наступания на грабли в давних версиях библиотеки 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 со всеми зависимостями пересобирать для нормальной поддержки русского языка, но те времена давно минули. О чем это я - если не хотите лишних проблем на свои [измерить самим] сантиметров, обновите систему для работы с русским языком в картсервере. Где-то у меня скрипты для сборки всех зависимостей валялись, но я ни в коей мере не считаю себя дальновиднее мантейнеров соответствующих пакетов и теперь, когда все работает "из коробки" фигней не страдаю. Ну, если кому интересно, в рассылке пожалуй их могу опубликовать, чем не повод вспомнить и улыбнуться тем временам.

понедельник, 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 метров!






Продолжение следует...

Автор: Николаев Александр.
Предисловие: Печников Алексей.

суббота, 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



Автор: Николаев Александр.

Только HTML для создания карт Google Maps. Часть 4. Дополнительные возможности

И в завершение нашего рассказа мы рассмотрим некоторые "продвинутые" возможности.


Всплывающая подсказка при наведении мышки

Начиная с версии 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, включая изображения, видео и прочие элементы.
Если щелкнуть на любой из созданных меток, появится окно с подробным описанием.


<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 следующим образом:

<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 А мы с Вами будем общаться на нормальном, русском языке :-)

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

<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) разработчика на перо писателя :-)

(C) Alexey Pechnikov aka MBG, mobigroup.ru