in Coding, Javascript

Customising Google Maps Markers pt.2, Graph Overlay

Quick update from the previous post: I decided I wanted to add more detail to my map by showing small pie charts instead of markers.

After trying and failing to use Google’s old Image Charts for the marker images, I found a very neat solution on StackOverflow that solves the problem nicely by rendering Google’s new interactive charts onto a custom overlay above the map:

map3

I then added a piehole to make overlapping charts easier to see:

map2

Passing in the extra data was also a slight pain because I needed to use a Dictionary<string, int> for the values of the pie chart, which csharp can’t serialise to JSON for some reason. Luckily someone has already written a nice serialisable version which did the job.

Next on the list is showing more details when clicking on the graph.