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.

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.

• javascript
• dynamic
• charts
• marker

Share Improve this question Follow edited Mar 19, 2019 at 12:33 Jonny asked Mar 19, 2019 at 12:24 JonnyJonny 8861313 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

I also noticed that my icons with custom colors disappeared. There seem to be some pregenerated icons stored at http://maps.google./mapfiles/ms/icons, such as http://maps.google./mapfiles/ms/icons/green-dot.png

I've managed to find a list of icons hosted by Google: https://sites.google./site/gmapsdevelopment/