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.

[ghost]

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>