Только 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" этого примера.
Продолжение следует.
Comments
Не могли ли бы вы рассказать (если Вам известно, конечено), как сделать вот такую карту: http://gps-tour.com/tours/view.php/action.view/entity.detail/key.5535/Mountainbike.5535.html
Особенно интересует построение профиля местности и синхронизация его с треком.
Спасибо!