Как заполнить информационное окно Google Maps контентом AJAX?

Question

Я хочу заполнить информационное окно маркеров моих карт Google динамическим контентом.Когда пользователь нажимает на маркер, должен быть запущен вызов AJAX, который выбирает соответствующий контент с сервера.

Между тем следует открыть информационное окно и отобразить сообщение предварительной загрузки.Как только приходит ответ AJAX, он должен заменить сообщение предварительной загрузки.

Как это сделать с помощью API Карт Google 2?

( extinfowindow предлагает такую ​​функциональность, но является внешним и устаревшим дополнением. Я предпочитаю«чистый» подход Google Maps API).

Answer 1

Может быть, что-то вроде следующего.Я не уверен, как подключен прослушиватель событий, но если он работает, как в Google Maps v3, он прикреплен к самому маркеру, и вы можете использовать ссылку "this", чтобы добраться до выбранного клика.* Обновленный ответ.Непроверенный код - но он должен работать.Установите ID для содержимого информационного окна и обновите его, используя модель DOM.

function ajax_me() {
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    this.openInfoWindow('<div id="current-info-window">Loading...</div>');
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('current-info-window').innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET", "backend.php", true);
    xmlhttp.send();
}

...

marker = new GMarker(...);

GEvent.addListener(marker, 'click', ajax_me);

Answer 2

Я наконец решил проблему, немного уточнив ответ Бьёрна.Его подход состоял в том, чтобы использовать div содержимого внутри информационного окна и обновлять его с document.getElementById(), как только приходит ответ AJAX.Это работает, но не изменяет размер информационного окна, чтобы оно соответствовало содержимому AJAX ==> «пузырь» переполнен.

Мое окончательное решение решает эту проблему, вычисляя размеры содержимого div после заполнения содержимого AJAXЗатем я использую метод infoWindow.reset () - для определения новых измерений.

Вначале это было немного странно, но в итоге оказалось, что .reset () также требуется позиция маркера для правильной визуализации измененного размера информационного окна.Обратите внимание, что я использую jQuery для DOM.

marker = new GMarker (...);
GEvent.addListener(marker,'click', loadPOIDescription);

function loadPOIDescription (){
    var marker = this;
    marker.openInfoWindow('<div id="marker-info">Loading POI Description...</div>');
    $.get("backend.php", function(data){
        var $contentDiv = $("#marker-info");
        $contentDiv.html(data);
        //the magic happens here
        var position = marker.getLatLng();
        var infoWindow = map.getInfoWindow(); //map is my global GMaps2 object
        // set the infowindow size to the dimensions of the content div
        var infoWindowSize = new GSize($contentDiv.width(), $contentDiv.height());
        //apply the modifications 
        infoWindow.reset(position, null, infoWindowSize, null, null); //reset the infowindow
   });
}