Google Maps: Как Trulia создает свои пользовательские InfoWIndows?

Question

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

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

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

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

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

Answer 1

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

Я думаю, что сайт, о котором вы упомянули, использует пользовательский div overlay, а не информационное окно 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' 
}); 

Вот это pretty good example того, как это может быть сделано.

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

Оба они могут быть достигнуты с помощью CSS: (2) с помощью z-index и (3) с position.

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

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

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

Answer 2

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

является расширением Google Maps, который позволяет создавать пользовательские infowindows