Google maps symbol with embeded text - google-maps

Question

I want to create symbols with text on google maps as shown in the following map where roads are marked with their names e.g. M1.
google maps example
Also the text is not predefined so I cannot use stored icons with the appropriate text.
Any ideas on how google creates these symbols?

Answer 1

A good idea here is to write a server side process in your backend's language to render this dynamic image.
For PHP there is: PHP GD
Perl(My Current backend) has a number of module for drawing images.
I'm sure whatever your backend is it has some.
Anyway you can write some code that given some GET variables will return an image drawn using them.
Then you just need a small function to build the url:
function getImage(text,color) {
return "example.com/draw/icon.php?text="+text+"&color="+color;
}
This will call your serverside file which can return the image with the correct headers.
You'll need to employ some form of caching to generate these probably on the server side and the client side depending on your apps load.

Answer 2

So you want to add place names? You can create custom icons or labels, are you using the API or My Maps?
This may help if you're using My Maps:
https://support.google.com/mymaps/answer/3024931?hl=en
otherwise if you're using the API then try this:
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
https://developers.google.com/maps/tutorials/customizing/custom-markers