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:

Google Map Example

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:

See the Pen Google Map SVG markers by Dzongkha (@Dzongkha) on CodePen.

Hope it will be helpful for you in creating your own complex and beautiful markers for Google Maps.

Share:Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn2Share on VK