Since years I created Google dynamic map markers in Javascript with Google's Chart API described here:
Dynamic icons
The generating of map markers doesn't work any more since a few days. This is clearly stated at the top of the link:
"Warning: This API is deprecated and is scheduled to be turned off on March 14, 2019. Please use the actively maintained Google Charts API instead."
Their link to the new Google Chart API doesn't provide any replacement for creating a map marker like icon with a custom color and a custom letter in it (what I need).
The closest I've found in the new API is:
Customizing Markers
But in here the only option is to replace the default Google marker with a custom image. So there seems to be no dynamic generating of markers.
Maybe I've overseen something or anyone knows a service to create google maps like markers with a letter in it and a custom color.
In between I've found a solution that allows to set a defined color and a label inside the marker. It works without Google Chart API (Google maps API only).
The first part of the solution is taken from here (see answer from vokimon): It takes a SVG path instead of a predefined image (png). That way you can define a custom color (and even more if needed):
function createPin (color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 1,
labelOrigin: new google.maps.Point(0, -30)
};
}
The "labelOrigin" is important to get the label positioned properly.
Now you can create the marker itself:
var marker = new google.maps.Marker({
map: <yourMapInstance>,
position: new google.maps.LatLng(<latitude>, <longitude>),
icon: createPin('#F6AC01'),
label: {
text: 'X',
fontWeight: 'bold'
},
});
There are more nice label options if needed described here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With