Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamic map marker icons with new Google Chart API?

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.

like image 242
Jonny Avatar asked Sep 13 '25 00:09

Jonny


1 Answers

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.

like image 80
Jonny Avatar answered Sep 14 '25 15:09

Jonny