Google Maps: call openInfoWindowTabsHtml + GDownloadUrl (Ajax call)

I ran into the following problem. On a Google map, I want to add tabbed info windows where content is loaded from an external file using the GDownloadUrl method. The code works fine, but with two problems. a) The first time I click a marker, nothing happens. I need to double click to get the info window. After that it works fine. b) When I close the information window and open it again, the tabs are repeated. Each time I open the info window again, these tabs are repeated. So, if you use the code below and open the information block 3 times, I get 6 tabs (information, photos, information, photos, information, photos). Any idea on what I'm doing wrong here?

I also tried this with the jQuery $ .get method, but the results were exactly the same.

function createREMarker(lat,long,reID)
{
    var reMarker = new GMarker(rePoint,iconRE);
    GEvent.addListener(reMarker, "click", function()
    {
        GDownloadUrl('testcontent.php?reID='+reID+'&what=info', function(data) {
            content1 = data;
        });
        GDownloadUrl('testcontent.php?reID='+reID+'&what=photos', function(data) {
            content2 = data;
        });
        tabs.push(new GInfoWindowTab('Info', '<div id="mapOverlayContent" style="width:375px; height:220px; overflow:auto;">'+content1+'</div>'));
        tabs.push(new GInfoWindowTab('Photos', '<div id="mapOverlayContent" style="width:375px; height:220px; overflow:auto;">'+content2+'</div>'));
        reMarker.openInfoWindowTabsHtml(tabs);
    });
    return reMarker;
};
+3
1

-, v2 API, . , , ( v3 API jQuery):

function createMarker(point, id, markerOptions) {
    var marker = new google.maps.Marker(point,markerOptions);
    var Lat = point.lat();
    var Lng = point.lng();

    google.maps.Event.addListener(marker, "click", function() {
        $.ajax({
            type: "GET",
            url: "/data/specific.xml?id=" + id,
            dataType: "xml",
            success: function(xml) {
               var this_marker = $(xml).find('marker');
               var name = $(this_marker).attr("name");
               details_tab = details_tab + "ID: " + id + "<br />Name: " + name + "<br />";
               var infowindow = new google.maps.InfoWindow({
                   content: details_tab,
               });
               infowindow.open(map, marker);
            }
        });
    }
    return marker;
}

, , v3 API?:( jQuery UI:

http://gmaps-samples-v3.googlecode.com/svn-history/r78/trunk/infowindow/tabs.html

http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/infowindow/tabs.html?r=78

+3

Source: https://habr.com/ru/post/1746680/


All Articles