Google Maps Cluster Dropdown?

Question

I'm using Google maps to place pins on the world, and I'm using markercluster.js to cluster the pins when they get too close. What I'm looking to do is make it so you can hover over a cluster of pins and a drop down will appear showing the titles of the pins in that area.

I haven't seen anything on the forums about this, so I thought maybe someone else might have run into this and found a solution already. Thanks for any help in advance!

My code is just the typical way to add pins to the Google maps API. But I'll list it here just in case.

var bounds = new google.maps.LatLngBounds();
var markers = [];
for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
            //icon: '/bin/images/people/' + locations[i][4] + '-1.jpg'
    });
    markers.push(marker);
    bounds.extend(marker.position);
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker)
        }
    })(marker, i))
}
var clusterStyles = [{
    textColor: 'white',
    url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
    height: 50,
    width: 50
}, {
    textColor: 'white',
    url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
    height: 50,
    width: 50
}, {
    textColor: 'white',
    url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
    height: 50,
    width: 50
}];
var mcOptions = {
    gridSize: 50,
    styles: clusterStyles,
    maxZoom: 15
};

var markerCluster = new MarkerClusterer(map, markers, mcOptions);

map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() {
    map.setZoom(3);
    google.maps.event.removeListener(listener)
});

Answer 1

You could consider the following approach.

Modify ClusterIcon by introducing clustermouseover event that will be triggered on mouseover event:

//Note: the remaining code is omitted from this function
ClusterIcon.prototype.onAdd = function() {
    this.div_ = document.createElement('DIV');

    var panes = this.getPanes();
    panes.overlayMouseTarget.appendChild(this.div_);

    var that = this;

    google.maps.event.addDomListener(this.div_, 'mouseover', function() {
        that.triggerClusterMouseOver();
    });

};

where

ClusterIcon.prototype.triggerClusterMouseOver = function () {
    var markerClusterer = this.cluster_.getMarkerClusterer();
    google.maps.event.trigger(markerClusterer, 'clustermouseover', this.cluster_);
};

Attach event handler for displaying the corresponding information. The following example demonstrates how to display the list of names:

google.maps.event.addListener(markerClusterer, 'clustermouseover', function(clusterer) {
    var markers = clusterer.getMarkers();

    markers.forEach(function(marker){
        infowindow.content += '<div>' + marker.title + '</div>';
    });
    infowindow.setPosition(clusterer.getCenter());
    infowindow.open(clusterer.getMap());
});

Example: Plunker

Answer 2

You could consider the following approach Also its work for me :

public void initilizeMap() {
            googleMap = mFragment.getMap();
            googleMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
            googleMap.getUiSettings().setZoomControlsEnabled(true`enter code here`); // true to`enter code here`
            googleMap.getUiSettings().setZoomGesturesEnabled(true);
            googleMap.getUiSettings().setCompassEnabled(true);
            googleMap.getUiSettings().setMyLocationButtonEnabled(true);
            googleMap.getUiSettings().setRotateGesturesEnabled(true);
            if (googleMap == null) {
                Toast.makeText(getActivity(), "Sorry! unable to create maps",
                        Toast.LENGTH_SHORT).show();
            }
            mClusterManager = new ClusterManager<MyItem>(getActivity(),   googleMap );
//          googleMap.setInfoWindowAdapter(new CustomInfoWindowAdapter());
            googleMap.setOnMapLoadedCallback(this);
            googleMap.setMyLocationEnabled(true);
            googleMap.setBuildingsEnabled(true);
            googleMap.getUiSettings().setTiltGesturesEnabled(true);

MyItem offsetItem = new MyItem(Double.parseDouble(outletList.get(i).getMap_latitude()),
                                           Double.parseDouble(outletList.get(i).getMap_longitude()), title , address);
            mClusterManager.addItem(offsetItem);
            googleMap.setInfoWindowAdapter(new CustomInfoWindowAdapter(offsetItem));

}


    private class CustomInfoWindowAdapter implements InfoWindowAdapter {
        Marker marker;
        private View view;
        private MyItem items;

        public CustomInfoWindowAdapter(MyItem item) {
            view = getActivity().getLayoutInflater().inflate(
                    R.layout.custom_info_window, null);
            this.items = item;
        }

        @Override
        public View getInfoContents(Marker marker) {

            if (marker != null && marker.isInfoWindowShown()) {
                marker.hideInfoWindow();
                marker.showInfoWindow();
            }
            return null;
        }

        @Override
        public View getInfoWindow(final Marker marker) {
            this.marker = marker;

            String url = null;

            if (marker.getId() != null && markers != null && markers.size() > 0) {
                if (markers.get(marker.getId()) != null
                        && markers.get(marker.getId()) != null) {
                    url = markers.get(marker.getId());
                }
            }

            final ImageView image = ((ImageView) view.findViewById(R.id.badge));

            if (url != null && !url.equalsIgnoreCase("null")
                    && !url.equalsIgnoreCase("")) {
                imageLoader.displayImage(url, image, options,
                        new SimpleImageLoadingListener() {
                            @Override
                            public void onLoadingComplete(String imageUri,
                                    View view, Bitmap loadedImage) {
                                super.onLoadingComplete(imageUri, view,
                                        loadedImage);
                                getInfoContents(marker);
                            }
                        });
            } else {
                image.setImageResource(R.drawable.ic_launcher);
            }

            final String title = items.getTitle();
            Log.e(TAG, "TITLE : "+title);
            final TextView titleUi = ((TextView) view.findViewById(R.id.title));
            if (title != null) {
                titleUi.setText(title);
            } else {
                titleUi.setText("");
            }

            final String address = items.getAddress();
            final TextView snippetUi = ((TextView) view
                    .findViewById(R.id.snippet));
            if (address != null) {
                snippetUi.setText(address);
            } else {
                snippetUi.setText("");
            }