Add more flexibility to markers

[tbnovaes]

As of now, the only way to add markers is by using an image. It would be great to be able to also use icons (Eg.: font awesome) and to set colors.

[IsaacSomething]

technically you can do this. You just need to add https://github.com/ackerapple/agm-overlays
and then just map the lat and long to the same lat and long as your marker

<agm-marker #marker [latitude]="lat" [longitude]="lng">
   <agm-overlay [latitude]="lat" [longitude]="lng">
       <i class="fas fa-map-marker"></i>
    </agm-overlay>
</agm-marker>

[MathiasHC]

I can confirm the above works @tbnovaes 💪
– You can also change the [iconUrl] on the agm-marker, to hit the font pack – you might need a "handle" for this though.

[tbnovaes]

@MathiasHC I tried the @IsaacSomething solutions, but what happened to me was that I had the default marker pin, and over that the overlay... so I end up with 2 pins, the one I wanted and the one I didn't want.

[IsaacSomething]

You can just make the marker icon source in agm-marker null

[tbnovaes]

@IsaacSomething Okay, I'll try it, thank you! Anyway I still think it would be a good addition to the marker to have it. Installing a new package just for that is not the best solution.

EDIT: setting [imgUrl]="null" does not work and using imgUrl="null"will make a request to /null and generate an error loading the asset that does not exist. Using [opacity]="0" works.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

you can pass an Icon or a Symbol literal to iconUrl and it should work.

[id1945]

technically you can do this. You just need to add https://github.com/ackerapple/agm-overlays
and then just map the lat and long to the same lat and long as your marker

<agm-marker #marker [latitude]="lat" [longitude]="lng">
   <agm-overlay [latitude]="lat" [longitude]="lng">
       <i class="fas fa-map-marker"></i>
    </agm-overlay>
</agm-marker>

Thanks a lot :)

    <agm-map *ngIf="location"
        [(latitude)]="location.latitude"
        [(longitude)]="location.longitude"
        [(zoom)]="location.zoom"
        [(mapTypeId)]="location.mapType"
        [zoomControl]="location?.zoomControl ? location.zoomControl : false"
        [scrollwheel]="location?.scrollwheel ? location.scrollwheel : false"
        [mapTypeControl]='location?.mapTypeControl ? location.mapTypeControl : false'
        [streetViewControl]='location?.streetViewControl ? location.streetViewControl : false'
        [fullscreenControl]="location?.fullscreenControl ? location.fullscreenControl : false">
        <agm-marker *ngFor="let m of location?.markers;"
            [(latitude)]="m.latitude"
            [(longitude)]="m.longitude"
            [label]="m.label"
            [iconHeight]="20"
            [iconWidth]="20"
            [markerDraggable]="m.draggable">
            <agm-overlay
                [(latitude)]="m.latitude"
                [(longitude)]="m.longitude">
                <div>
                    <i *ngIf="!isBase64(m.iconUrl)" [class]="m.iconUrl" [style.color]="m.color" style="height: 20px; width: 20px;"></i>
                    <img *ngIf="isBase64(m.iconUrl)" [src]="m.iconUrl" height="20" width="20">
                </div>
            </agm-overlay>
        </agm-marker>
    </agm-map>