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.