Dynamic SVG Markers for Google Maps in Vue.js
Step-by-step tutorial: Create a marker with dynamically generated colors and display it on your map
Google Maps are great and Google Maps APIs are even greater.
Suddenly, a couple of years ago, all my projects became Google Maps related and you might say that I’ve become a true Google Maps API expert.
I’ve been submitting a lot of requests to the support and development teams, I know some of the people in person who work on the Google Maps team, and I am one of the contributors on the react-google-maps repo.
There is not a single API that I haven’t worked with, and one of the most frustrating things is, sadly, markers.
Unlike the extremely customizable Mapbox markers, Google Maps doesn’t allow you to do some simple things, like rotating the marker image, inserting more than one character into it, or animating marker movement on the map.
Weird, right?
Throughout my years working with Google Maps I’ve seen dozens of use cases where this functionality was essential and I’ve had to figure out my own dirty hacks.
With most of them, I just ended up using Custom Overlays, a great tool that allows you to put any HTML element on the map, which, as you can tell, gives you endless opportunities to create custom markers.
There are a couple of issues with that, for example, losing the Clustering functionality and losing the functionality of markers displaying on the Street View (yes, some clients really liked this feature).
In this topic, I will show you my way of using SVG to generate dynamic markers using Vue.js.
With Vue, I’ve been using the vue2-google-maps package for easier interaction with the map. If you choose a different library or you’re just using a pure API without wrappers, this article is still going to be useful to you.
Coding
First, let’s create an SVG file that we will use as our marker.
Hopefully, your team has a designer and they provided you with a nice SVG file. I usually start with running the file through SVGOMG tool to clean the code from the junk.
Now, we want to pass some props to this marker, such as stroke color and fill color.
To use this component as the marker image, it has to be transformed into a base64 URL string.
Finally, let’s create an icon for our marker.
If you’re reading this, you’re most likely familiar with Google Map’s Marker API and know how to add it to your map, so I’m going to skip that part and just show you the end marker object.
That’s it! You have a marker with dynamically generated colors, displayed on your map.
As you can imagine, the modifications you can implement are endless — rotate, shift, scale… do whatever you need to do to it by passing different props to your Vue component.
Conclusion
Please note that this approach is good when the number of markers you want to display on your map is not extremely high.
If you do have a high number of markers, you might want to format your SVG URL string into PNG, because Google highly recommends using PNG instead of SVG on high marker loads.
There are lots of ways of doing that. The most efficient one, in my experience, is by using canvas as a middleman.
In my future posts, I will describe more tricks that I learned using Google Map’s JavaScript API.
I am still debating which framework I like more — React or Vue — but for those of you who are using React, here’s a short tip on how to do the same thing as I described above:
Feel free to reach out to me if you have any Google Maps related questions, I’ve most likely faced the same issue and found a (hacky) solution for it. Thanks for reading!
