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






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