Custom Marker HERE API 3.1 about maps-api-for-javascript-examples HOT 7 CLOSED

I see this in the middle of the map on your last example:

Also, I would recommend getting new credentials and invalidating the one you publicly posted here. That API key is not something that should be made public AFAIK.

from maps-api-for-javascript-examples.

Hi @chiragkoli, you can create your custom marker by adding an instance of H.map.Icon as a parameter when you create a H.map.Marker.

For example:

const svgMarkup = '<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">' +
  '<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>';
const customIcon = new H.map.Icon(svgMarkup);
const customMarker = new H.map.Marker({lat: 41.8625, lng: -87.6166 }, {icon: customIcon});

More info in the API documentation:
https://developer.here.com/documentation/maps/topics_api/h-map-marker.html#h-map-marker
https://developer.here.com/documentation/maps/topics_api/h-map-icon.html#h-map-icon

from maps-api-for-javascript-examples.

Thanks for your answer!
Unfortunately the marker is not displayed locally on my computer.

from maps-api-for-javascript-examples.

@Mexikaner9 what browser do you use? Do you access the page locally with the file:// protocol?

from maps-api-for-javascript-examples.

Google Chrome and Mozilla Firefox.

from maps-api-for-javascript-examples.

@Mexikaner9 hello how did the custom marker work? can you tell me

from maps-api-for-javascript-examples.

Don't bother trying to create your own map icons, instead, you can use these:
http://map-icons.com/

from maps-api-for-javascript-examples.