CODEWITHSUNDEEP
angularsvggoogle-maps-markers
Mia
Mia

Reputation: 381

changing color of Angular Map svg marker from typescript

I have a project which includes angular google map (agm-map) and I want to use Just ONE svg icon and change color of that icon to visualize different types of markers (different data). My question is how can I change color of svg marker and pass it to html(agm-marker tag ) from typescript, here is what it agm-marker looks like:

<agm-map [latitude]="mapLat" [longitude]="mapLng" [zoom]="mapZoom">
        <agm-marker-cluster imagePath="imagePath">
            <agm-marker *ngFor="let m of markers; let i = index"
                        [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [iconUrl]="m.icon" [title]="m.title">
            </agm-marker>
        </agm-marker-cluster>
</agm-map>

I am passing markers from a typescript file, as far as I know agm-marker does not have color attribute to change it from html file and from typescript I tried solutions from How to use SVG markers in Google Maps API v3. I passed svg content plus some modifications and changed color in typescript and passed as iconUrl to html. but it is not showing svg marker, like it is invisible not empty!

Upvotes: 3

Views: 3264

Answers (1)

ShellNinja
ShellNinja

Reputation: 644

AGM Marker directive does not expose a way to modify the SVG, however there is an IconUrl property to replace the standard icon thus allowing you to use a different color via icon replacement. You can capture the original SVG, open in an editor, recolor, save and place in your assets folder for use conditionally by binding.

Upvotes: 1

Related Questions