Google Maps InfoWindow Content - dynamic loading on Click (using jquery-ui-maps)

Question

I do have a project with about 3000 markers beeing distributed on a Google Map. I use jquery-ui-maps together with MarkerClusterer and Filtering for a better presentation.

The "marker Data" is loaded via a JSON file.

If I do include all "infoWindowContent" into the JSON file, it will be to big. I would just like to call a function/load a file with the marker ID and having the content set with the result from the called file.

Here is a brief example of what I am doing right now:

$(function() 
{ 
    $('#map').gmap(
    {
        'disableDefaultUI':false, 
        'zoom': 5,
        'center':'<?=$mylat?>,<?=$mylon?>',
        'callback': function() 
        {
            var tags = [<...GETTING LIST OF AVAILABLE TAGS HERE ... >];
            $.each(tags, function(i, tag) 
            {
                $('#sidebar').append(('<label style="margin-right:5px;display:block;"><input type="checkbox" style="margin-right:3px" value="{0}"/>{1}</label>').format(tag, tag));
            });
            var self = this;
            $.getJSON( '< LOADING JSON FILE )?>', function(data) 
            { 
                $.each( data.markers, function(i, marker) 
                {
                    var tags = marker.tags.split(',');
                    self.addMarker(
                    {
                        'position': new google.maps.LatLng(marker.lat, marker.lon),
                        'icon':marker.icon,
                        'tags':tags
                    })
                    .click(function()
                    {
                        //self.openInfoWindow({ 'content':marker.c}, this); => if supplying Conent in JSON file ... works all right, but JSON file is to BIG

// THIS IS, WHERE I NEED SOME ADVICE ... 
                                         self.openInfoWindow({ 'content':marker.id }, this); 
// I want to load a dynamic content for this ID only, if the marker is clicked and the Info Window will be shown
                    });
                });
                self.set('MarkerClusterer', new MarkerClusterer(self.get('map'), self.get('markers'),
                {
                    'maxZoom':12
                }));
                self.addMarker({ 'icon':'/code/geo/images/gmap_pin_blue.png','position':'<?=$mylat?>,<?=$mylon?>','title':'You are here'}).click(function(){
                    self.openInfoWindow({'content':'Your current position' }, this);
                });
                $('#sidebar').show();
            });

            $('#sidebar input:checkbox').click(function(e) 
            {
                e.preventDefault;
                $('#map').gmap('closeInfoWindow');
                $('#map').gmap('set', 'bounds', null);
                var filters = [];
                $('#sidebar input:checkbox:checked').each(function(i, checkbox) 
                {
                    filters.push($(checkbox).val());
                });

                if ( filters.length > 0 ) 
                {
                    var markerList=[];
                    var i=1;
                    self.find('markers',{'property':'tags','value': filters,'operator':'AND'}, function(marker, isFound)  
                    {
                        if(isFound)
                        {
                            markerList.push(marker);
                            i=i+1;
                        }
                    });
                    var filterInfo = filters.join(' && ');
                    $('#result_selection').html("Current Filter: " + filterInfo + " => Results: " + (i-1));
                    console.log("Current Filter: " + filterInfo + " => Results: " + (i-1));
                    self.get('MarkerClusterer').clearMarkers();
                    self.get('MarkerClusterer').addMarkers(markerList);
                    self.get('MarkerClusterer').redraw_();
                } 
                else 
                {
                    self.get('MarkerClusterer').clearMarkers();
                    $('#result_selection').html('No Filter applied!');

                    $('#map').gmap('set','MarkerClusterer', new MarkerClusterer(self.get('map'), self.get('markers'),
                    {
                        'maxZoom':12
                    }));
                }
                self.addMarker({ 'icon':'/code/geo/images/gmap_pin_blue.png','position':'<?=$mylat?>,<?=$mylon?>','title':'You are here'}).click(function(){
                self.openInfoWindow({'content':'Your Position' }, this);
                });
            });
            return false;
        }
    });
}); 

I found this solution, but how can this be included in above script? Google Maps V3: Loading infowindow content via AJAX

Thank you!

Christian

Answer 1

OK .. figured it out ...

basically it's easy, once you know where to aim at.

After adding the markers, adapt the "listener" (here it's the click() function) and get your dynamic data via ajax:

Inside above script:

                self.addMarker(
                {
                    'position': new google.maps.LatLng(marker.la, marker.lo),
                    'icon':mico,
                    'tags':tags
                    //, 'bounds': true 
                })
                .click(function()
                {
                    var content = load_content(marker.f);
                    self.openInfoWindow({ 'content': content}, this);
                });

And here's the function to get the data loaded via Ajax and return the data:

function load_content(id){
    var html = $.ajax({
        url: "/getYourDataHere.php?id="+id,
        async: false}).responseText;
    return html;
}

Maybe this will help someone who is looking for such a solution.