If you’ve ever used the Google Maps Javascript API, you’re probably aware that marker labels can only be one letter long. But sometimes you want them to say something meaningful, and often that takes more than a single character.

In case you’re looking for a way to display arbitrary strings in a Google Maps marker, good news, here’s how you can do it!

You can pass a data URL when you’re supplying an image for an marker, which is great. We can send it some SVG which includes our label text.

1. Import your marker icon into Illustrator, or some other vector graphics software.
2. Type in some sample text, formatted however you like.
3. Export it as SVG.
4. Create a function that replaces the sample text with whatever you want to display, and returns the adjusted SVG
5. Pass that to the Google Maps API as a data URL.

// Generate a pin!
function createPin(text) {
var svg = '...'; // Imagine there's SVG here.
return 'data:image/svg+xml,' + svg.replace('sample-text', text);
}
// Create the map. Position and style it however you like
var map = new google.maps.Map(document.getElementById('maps_marker_text_example'), {
center: {lat: 49.264691, lng: -123.100},
});
// Create the marker
var marker = new google.maps.Marker({
map: map,
icon: createPin('delicious burritos'), // Generate the SVG for this marker
position: {lat: 49.2630584, lng: -123.0945}
});

Bam! You’re done. You’ve got map markers showing custom text.

One thing to be aware of is the <svg /> tag must include width and height attributes, otherwise weird things will happen. When I exported from Illustrator, my file had a viewBox attribute, but no width and height. So if yours is missing those, add them in.