Поместите infoWindow в статическое положение вдали от маркера (Google Maps)

Я хочу добиться (и пока ничего не могу найти), так это то, что infoWindow не привязана к маркеру. Я хотел бы разместить его в статической позиции в моем окне просмотра и просто обмениваться контентом в зависимости от того, какой маркер был нажат.

В: Как я могу разместить (а не просто смещать) информационное окно маркера карт Google в фиксированном месте.


person kaiser    schedule 30.08.2011    source источник


Ответы (1)


Отвечая на свой вопрос - на случай, если это кому-то понадобится:

// Add somewhere before creating your map to hide the info window as long as it got no content:
<script type="text/javascript">
jQuery( '#info' ).hide();
</script>

<script type="text/javascript">
function createMarker( lat, lng, whatever ) {
    // map_object_name = the name of your map when you init()
    html = "<strong>" + whatever + "</strong>";

    var marker = new google.maps.Marker( {
        map: map_object_name,
        position: new google.maps.LatLng( lat, lng )
    } );

    // This snippet adds the content on the fly (when you click the marker)
    google.maps.event.addListener( marker, 'click', function() {
        // This pans the viewport/centers the marker in your viewport
        map_object_name.panTo( new google.maps.LatLng( lat, lng ) );

        // This shows the html-element with the id "info" and adds the html content
        jQuery( '#info' ).show();
        // This clears the content before you add new one
        jQuery( '#info' ).empty();
        jQuery( '#info' ).append( html );

        // Commented out - just as reference
        // infoWindow.setContent( html ); // the original infoWindow as you know it from Google Maps
        // infoWindow.open( map_object_name, marker ); // the same, just the callback
    } );
}
</script>

«Размещение» / позиционирование элемента #info может быть выполнено с помощью обычных html и css.

person kaiser    schedule 31.08.2011
comment
Вопрос. Ваше пользовательское информационное окно находится на карте или за ее пределами? Спасибо! - person Seano666; 22.10.2013
comment
@ Seano666 Вопрос задан два с половиной года назад, но, глядя на код, я бы сказал, что элемент #info DOM находится за пределами карты, но закомментированный infoWindow должен быть на карте - вам все равно придется создать Это. Хм. Вы можете просто установить контейнер #map на position: relative; z-index: 1;, а элемент #info на position: absolute; top: XYpx; left/right: XYpx; z-index: 10;, чтобы он занял статическое положение над картой. - person kaiser; 22.10.2013