Только 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” этого примера.
Продолжение следует.
автор: Печников Алексей Олегович
e-mail: [email protected]
сайт: http://mobigroup.ru
P.S. Маплет GPS Клуба “Мои POI” можно посмотреть здесь
Cтатья является собственностью GPSClub.ru, все права на материал принадлежат GPS Club. ru (c)
При полной или частичной перепечатке материала обязательна гиперссылка на www.gps-club.ru
Обсудить статью на форуме.
30.07.2007
About The Author
