CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Nyxynyx
Nyxynyx

Reputation: 63619

How to Access a Div inside Google Maps InfoBox?

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>

Upvotes: 3

Views: 2892

Answers (1)

ddinchev
ddinchev

Reputation: 34673

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

});

Upvotes: 1

Related Questions