Google Map, Clicking on a marker using cluster

Question

It is my first question. I personally find this website awesome and helped me a lot so many times :)

Now I have a question that is not resolved :P

I am developing a website using the Google maps API. It is expected that i will have too many markers in the future, so I thought about 2 ways of solve it:

1. Add an event everytime somebody clicks on the map, updating the markers showed via PHP file (async call to the file from Javascript)
2. Add clustering of files (following this steps http://www.svennerberg.com/2009/01/handling-large-amounts-of-markers-in-google-maps/)

I tried to do both of them and with both i have a problem

1. I dont know how to call a PHP file from Javascript that updates the markers on my map

2. If i use markerclusterer, it works fine, but i cannot open an html windows when i press on a single marker

     for(var i = 0; i < 50; i += 0.1) {
          var marker = new GMarker(new GLatLng(59.0 + i, 13.80 + i));
          markers.push(marker);
       }
   

This is the code i use for pushing the markers into the array, so i cannot add the event, well, i can but only applies to the last one.

Any idea?

Thanks in advance!!!

Answer 1

Try something like this to get the content for an individual marker when clicked. You just need to add the marker to your cluster and it should be ok.

function load_content(marker, id){
    $.ajax({
        url: '/map/getMarkerWindow/' + id,
        success: function(data){
            infowindow.setContent(data);
            infowindow.open(map, marker);
        }
    });
}

for(var i = 0; i < 50; i += 0.1) {
       var marker = new GMarker(new GLatLng(59.0 + i, 13.80 + i));

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(59.0 + i, 13.80 + i),
            clickable: true,
            id:i
        });

        google.maps.event.addListener(marker, "click", function() {
            infowindow.close();
            load_content(this, this.id);
        });

       markers.push(marker);
    }