CODEWITHSUNDEEP
google-mapsmapsgoogle-maps-markersagm-map
Lakhvir Singh
Lakhvir Singh

Reputation: 672

Google Maps API: Unable to Generate Custom Map Pins using "chart.apis.google.com"

I'm currently working on a project where I need to customize map pins for markers in Google Maps API. I've been using the URL format provided by Google Maps API to generate custom map pins dynamically, but it seems that the URL https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=L|1e90ff|000000 is not working anymore.

Could someone please clarify if this feature has been deprecated or if there's an alternative method to achieve custom map pins with Google Maps API?

Thank you in advance for any insights or suggestions!

Upvotes: 1

Views: 1576

Answers (2)

J. Minjire
J. Minjire

Reputation: 1088

Was also hit by this a few days ago. Switched to using AdvancedMarkerElements. They support custom colours, borders etc. Sample below:

        var latlong = new google.maps.LatLng(element.Latitude, element.Longitude);

        var marker = new google.maps.marker.AdvancedMarkerElement({
            position: latlong,
            title: 'Title here',
        });

        var pinBackground = new google.maps.marker.PinElement({
            background: '#BackgroundColor',
            glyphColor: '#CenterCircleColuor',
            borderColor: '#BorderColour',
            scale: 0.8, //Size of the marker
        });


        marker.content = pinBackground.element;
        marker.setMap(yourMap);

Upvotes: 0

Richard
Richard

Reputation: 347

Just been hit by this today too. Our workaround was to use svg:

var icon = {
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: "#FFCC00",
    fillOpacity: 1,
    anchor: new google.maps.Point(0, 0),
    strokeWeight: 1,
    scale: 0.5
}

var marker = new google.maps.Marker({
    position: loclatlong[i],
    map: map,
    icon: icon
});

Upvotes: 2

Related Questions