Custom Markers about angular-google-maps HOT 14 CLOSED

Is there a way to use custom icon fonts rather than png files - like these http://map-icons.com/ ?

from angular-google-maps.

Is it possible to insert some marker options like size?

from angular-google-maps.

@SebastianM
You can define a custom via a custom URL like this:

<sebm-google-map-marker [iconUrl]="'http://example.com/icon.png'">
</sebm-google-map-marker>

from angular-google-maps.

Yes, I think it could be a good thing to add height and width to the markers. It would be useful to be able to adapt the size of the markers to the size of the screen, like on smartphones.

from angular-google-maps.

The same folder as the html file is not correct path. Try to open the developer tools > network tab in your browser and search for the location where the browser is looking for the .png file. Probably it should be located somewhere in the root of you application or in the assets or images folder.

from angular-google-maps.

@bholben Is this possible now? "Is there a way to use custom icon fonts rather than png files - like these http://map-icons.com/ ?"

from angular-google-maps.

can we define icon based on local path from our /assets/images/ path for example instead of an actual httpurl type?

from angular-google-maps.

@rushstrike Sure. Just make sure the path is relative to your index.html file, i.e. iconUrl="assets/images/marker.jpg"

from angular-google-maps.

I have an issue, when i trie to customise the marker with [iconUrl] directive it goes hidden
<sebm-google-map-marker [iconUrl]="'car.png'">

note : the png file is in the same folder as the html file

from angular-google-maps.

thanks :D

from angular-google-maps.

Is it now possible to add size?

from angular-google-maps.

#517 works for me

from angular-google-maps.

Is there a possibility to customize that image icon used as a Marker with CSS ?

from angular-google-maps.

No the custom image icons like we have an ability to do in Javascript Maps. Like this for instance https://www.google.ca/search?q=custom+marker+google+maps&rlz=1C1CHZL_enCA749CA749&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiPpPiolq3aAhXQ7VMKHd1hC2sQ_AUICigB&biw=1536&bih=759#imgrc=crauu15YlnsVLM:

from angular-google-maps.