Карты Google: как Trulia создает свои собственные информационные окна?

Question

Мне очень нравится, как Trulia.com создал свои собственные Google Map InfoWindows.

Что мне особенно нравится в реализации InfoWindow в Trulia:

• Распространяется за пределы границы карты : Информационные окна Google Карт содержатся в пределах границы карты, тогда как Trulia, кажется, может плавать поверх карты
• Всегда отображает InfoWindow рядом с центром карты : в Google Картах InfoWindows всегда отображает InfoWindow над маркером, тогда как InfoWindows Trulia всегда отображает InfoWindow как можно ближе к центру карты. Например, если значок маркера карты находится в верхней части карты рядом с границей, информационное окно Trulia отображается ниже значок маркера карты
• InfoWindow отображается при наведении курсора мыши (не «щелчок») : при использовании стандартного окна Google Maps InfoWindow необходимо «щелкнуть» значок маркера карты, чтобы отобразить InfoWindow, тогда как информационные окна Trulia отображаются просто зависание над значком маркера карты.

Я нашел PdMarker , который является сторонним расширением для Google Map InfoWindows, которое выполняет большинство из перечисленных выше пунктов, но не все. 1) Он не выходит за границы карты, 2) он не работает с Google Maps API версии 3 (только версия 2).

Кто-нибудь знает, как Trulia выполняет свою InfoWindow-подобную реализацию в Google Maps API v3?

Answer 1

Это интересный вопрос. Я тоже недавно играл с картами. Я далеко не эксперт, но могу сказать вам, что знаю.

Я думаю, что сайт, который вы упомянули, использует пользовательское наложение div, а не информационное окно Google.

1. InfoWindow отображается при наведении курсора мыши (не «щелчок»)

Это можно сделать с помощью прослушивателей событий. Например, в API карт v3:

google.maps.event.addListener(marker, 'mouseover', function() {
   // myDiv.style.visibility = 'visible'
});
google.maps.event.addListener(marker, 'mouseout', function() {
  // myDiv.style.visibility = 'hidden'
});

Вот довольно хороший пример того, как это можно сделать.

2. Расширяется за границы карты
3. Всегда отображает InfoWindow рядом с картой Center

И то, и другое можно сделать с помощью CSS: (2) с помощью z-index и (3) с position .

Существует аналогичный пример использования пользовательских подсказок для маркеров, которые вы можете найти здесь . В нем также показано, как можно использовать указатели мыши для всплывающих подсказок, наведя на свою страницу другие элементы.

myElement.onmouseover = function(){
  google.maps.event.trigger(marker, 'mouseover');
}
myElement.onmouseout = function(){
  google.maps.event.trigger(marker, 'mouseout');
}

Наконец, другой сайт , который хорошо использует карты, хотя этот использует V2 API. Надеюсь, это поможет.

Answer 2

http://google -maps-utility-library-v3.googlecode.com / SVN / багажник / инфобокс / Docs / examples.html

- это расширение карт Google, которое позволяет создавать пользовательские информационные окна