Frrank Frrank - 8 days ago 5
Jade Question

How to change the color of google map api draggable markers?

what I am trying to achieve is when ever i create a new marker it should have a different color.This is my $scope .

$scope.addRoute = function() {
console.log('addRoute');
var marker2 = new google.maps.Marker(
{
position: {lat: 52.02, lng: 10.56},
visible:true,
icon:'',
map: map,
draggable: true
});

directionsDisplay.setMap(map);
};

Answer

Using Symbols

In your existing $scope.addRoute function instead of icon:'' use generateIcon().

    var marker = new google.maps.Marker({
        position : {
            lat : 52.02,
            lng : 10.56
        },
        visible : true,
        icon : generateIcon(),
        map : map,
        draggable : true

    });

You will need to add this function in you controller.

function generateIcon() {
    //http://map-icons.com/ for svg path
    return {

        path : 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z',
        scale : 0.5,
        fillColor : '#' + (Math.random() * 0xFFFFFF << 0).toString(16),
        fillOpacity : 100,
    }
}