Home/ Questions/Q 6749641
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T12:42:51+00:00

I am trying to select a <div> using jquery’s $(‘#divname’) inside a infobox that

  • 0

I am trying to select a <div> using jquery’s $('#divname') inside a infobox that Google Maps generate when any of the many markers on the map are clicked on.

Problem: When I try to access the div using $("#gallery") after the marker has been clicked on, aka inside the click event listener of that marker, nothing happens. I tried getting the html contained in that div from the click listener using console.log($("#gallery").html()) and it returns null!! How can I select this div!?

Click Event Listener Snippet Code

// 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());

});

Infobox Snippet Code

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    From what I see, you are adding markers in a loop? So, you use same ID for each marker’s infoWindow and it is against HTML/JS/CSS rules to have over one element with same ID and it’s normal to fail. What I would do is instead use only classes for my markers and in the event listener you could get the content of the .gallery div like this (have not tried but you should get the idea if it doesn’t work):

    // 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'));

});
    • 0