Как получить доступ к Div внутри информационного блока Google Maps?

#javascript #jquery #google-maps #google-maps-api-3

#javascript #jquery #google-карты #google-maps-api-3

Вопрос:

Я пытаюсь выбрать, <div> используя jquery $('#divname') , внутри информационного блока, который Google Maps генерирует при нажатии на любой из множества маркеров на карте.

Проблема: Когда я пытаюсь получить доступ к div с помощью $("#gallery") после нажатия на маркер, иначе говоря, внутри прослушивателя событий щелчка этого маркера, ничего не происходит. Я попытался получить html, содержащийся в этом div, из прослушивателя кликов, используя console.log($("#gallery").html()) и он возвращает null !! Как я могу выбрать этот div!?

Щелкните фрагмент кода прослушивателя событий

 // Create Listeners
markers[i]._index = i;
google.maps.event.addListener(markers[i], 'click', function() {

    infoboxes[this._index].open(map, markers[this._index]);
    infoboxes[this._index].show();
    console.log($('#gallery').html());
  

});

Фрагмент кода информационного блока

 for( i = 0; i < json.length; i  ) {

    // Place markers on map
    var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);
    var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });
    markers.push(marker);

    // Create infowindows
    var boxText = '<div id="infobox"> 
                        <div id="infobox_header_title"> 
                            <span id="infobox_header_price">$'   json[i].price   '</span> 
                            <span id="infobox_header_room">'   json[i].bedroom   'br </span> 
                            <span id="infobox_header_address">'   json[i].address_1   '</span> 
                        </div> 
                        <div id="gallery"> 
                            <img src="images/cl/'    json[i].photos[0]   '.jpg" /> 
                            <img src="images/cl/'    json[i].photos[1]   '.jpg" /> 
                        </div> 
                    </div>';
    var infoboxOptions = {
        content: boxText,
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: { 
        },
        closeBoxMargin: "10px 2px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: true,
        pane: "floatPane",
        enableEventPropagation: false
        };

    var infobox = new InfoBox(infoboxOptions);
    infoboxes.push(infobox);

            //<Click Event Listener code comes in here>
  

Ответ №1:

Из того, что я вижу, вы добавляете маркеры в цикле? Итак, вы используете один и тот же идентификатор для InfoWindow каждого маркера, и это противоречит правилам HTML / JS / CSS иметь более одного элемента с одинаковым идентификатором, и это нормально для сбоя. Что бы я сделал, так это вместо этого использовал только классы для своих маркеров, а в прослушивателе событий вы могли бы получить содержимое .gallery div следующим образом (не пробовал, но вы должны понять, если это не сработает):

 // Create Listeners
markers[i]._index = i;
google.maps.event.addListener(markers[i], 'click', function() {

    infoboxes[this._index].open(map, markers[this._index]);
    infoboxes[this._index].show();
    console.log($(infoboxes[this._index].getContent()).find('.gallery'));

});