Google Map SVG markers
It’s a real pain when you want to add your own markers to Google Map and you don’t want to use images because you want to make markers more customizable. For example if I need to create something like that:
Here there are 6 markers which are really similar to each other and the only difference is size and border color. We can use 6 different pictures but what if we decide to change border color of “20%” marker to green? Or to increase width of every markers border? Upload 6 more pictures? So now you see that it’s not the best variant for such a situation.
Here I’ve found a really great decision which uses d3.js and SVG technic to make the custom markers. We need just to customize coordinates part and part where we create SVG shapes for our markers. In my example I used three SVGs for circles (white inner circle, outer colored circle for border and semitransparent circle for shadow).
You can check the decision on CodePen in action:
Hope it will be helpful for you in creating your own complex and beautiful markers for Google Maps.