Только 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.
Comments