Convert markerCluster into a pie chart in google maps

Question

I am currently working on making clustered google maps. I have managed to cluster the markers. I have two types of markers in my map. Now when i cluster these, I can not show the underlying markers into groups. I want to convert them into pie chart. Each marker count having their weight in the pie chart. Just like the below image. Chart Marker Clusterer

I have also read about MarkerClustererPlus. But there are no examples using this in maps. http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/ This link is not working. If there is any other documentation about this plz share.

I have two different types of marker in my map. When these two types of marker gets clustered, The cluster should become a pie chart which contains the weight of these two in proportionate to the underlying marker count.

If there is anything related to this please answer. Thanks.

A related previous question Pie charts clustering on Google Maps's answer provided that he solved it by extending the Google Maps Marker Cluster Library to use Pie charts instead of cluster markers. He also provided a github for better sample. Hope it helps! — Mr.Rebot
@Mr.Rebot I have reviewed the Example. I am not quite sure that The criteria used in this. I understood from this example and bl.ocks.org/gisminister/10001728 from this that it call a function to make the pie chart based on the data extracted from markrer cluster and then it paste the static copy of that pie chart in place of the cluster. Am i correct? — Praveen Kumar

agamerr agamerr · Accepted Answer · 2017-03-27T12:10:11

All that you nead is here https://github.com/hassanlatif/chart-marker-clusterer

Traffic_accidents.json - is your data for simple_example.html

var accident_injuries = data.features[i].properties["5074"]; // Some like category ...

Then set data for your pie chart (group and title):

switch (Number(accident_injuries)) {
  case 1:
    accident_title = "Fatal";
    break;
  case 3:
    accident_title = "Serious injuries";
    break;
  case 2:
    accident_title = "Very serious injuries";
  ........

Set your up marker

var accident_LatLng = new google.maps.LatLng(Number(accident_lnglat[1]), Number(accident_lnglat[0]));
var marker = new google.maps.Marker({
  position: accident_LatLng,
  title: accident_title
});

Then push it into array

markers.push(marker);

After for loop just generate cluster

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

And thats all. Voalaa

Convert markerCluster into a pie chart in google maps

1 Answers