Angular-google-maps: Add more flexibility to markers

Created on 21 Jan 2019 · 8Comments · Source: SebastianM/angular-google-maps

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.

Source

tbnovaes

Most helpful comment

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>

IsaacSomething on 6 Feb 2019

👍3

All 8 comments

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>

IsaacSomething on 6 Feb 2019

👍3

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.

MathiasHC on 8 Feb 2019

@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.

tbnovaes on 8 Feb 2019

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

IsaacSomething on 8 Feb 2019

@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.

tbnovaes on 8 Feb 2019

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.

stale[bot] on 9 May 2019

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

ghost on 31 May 2019

👍1

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 :)

```html

[(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">

[(latitude)]="m.latitude"
[(longitude)]="m.longitude"
[label]="m.label"
[iconHeight]="20"
[iconWidth]="20"
[markerDraggable]="m.draggable">

[(latitude)]="m.latitude"
[(longitude)]="m.longitude">