google map cluster and richmarker

Question

The question is about google map's cluster and richmarker on ruby on rails

Recently I am developing a web application with Ruby on Rails, I found a vital problem yesterday, here is my javascript:

//Build initialize Gmap and build markers on it
//initialize array
var map_infos = [];
//receive marker data from controller
map_infos = gon.map_infos; 

function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(25.026, 121.523)
    };

    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

//rmarker setting
    var rmarkers = [];
    for(var i = 0; i < map_infos.length; i++){
    var rmarker = new RichMarker({
        position: new google.maps.LatLng(
            map_infos[i]["marker_lat"], 
            map_infos[i]["marker_lng"]
        ),
        content: '<div class="marker_background"><img src="'+map_infos[i]["friend_icon"]+'" class="friend_icon" /></div>',
        map: map
    }).setShadow('5px -3px 3px #555');
    rmarkers.push(rmarker);
    }
    var markerCluster = new MarkerClusterer(map, rmarkers);
}

google.maps.event.addDomListener(window, 'load', initialize);

But in the case above cluster function doesn't work! It still show every single marker!

So I change richmarker to the google default marker like below:

var rmarker = new google.maps.Marker({
    for(var i = 0; i < map_infos.length; i++){
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(
        map_infos[i]["marker_lat"], 
        map_infos[i]["marker_lng"]
    ),
    map: map
    });
    markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, rmarkers);
});

Cluster works now!

So the question is:

How can I user richmarker and cluster in the meantime?

Answer 1

I was just trying to do the same thing and got it to work the first time through using the following code (in Angular but should be similar enough to you) maybe you need to pass more properties to the RichMarker?

$scope.dynMarkers.push(
          new RichMarker({
                        map: $scope.map, 
                        position: position,
                        draggable: false,
                        flat: true,
                        anchor: RichMarkerPosition.MIDDLE,
                        content: '<div>some map marker</div>',
                    }));

then:

$scope.markerClusterer = new MarkerClusterer($scope.map, $scope.dynMarkers, {
            gridSize: 25
        });