суббота, 28 июля 2007 г.

Только 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" этого примера.






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

2 комментария:

Igor комментирует...

Уважаемый Алексей!
Не могли ли бы вы рассказать (если Вам известно, конечено), как сделать вот такую карту: http://gps-tour.com/tours/view.php/action.view/entity.detail/key.5535/Mountainbike.5535.html
Особенно интересует построение профиля местности и синхронизация его с треком.
Спасибо!

Печников Алексей комментирует...

Пример интересный, будет время, посмотрю. Но это будет не так скоро.


(C) Alexey Pechnikov aka MBG, mobigroup.ru