title: How to add custom markers icons in Here Maps API 3.0
body: <p>I want to use custom markers using <a href="https://developer.here.com/documentation/maps/topics/overview.html" rel="nofollow noreferrer">Here Maps</a> with JavaScript, but I tried the documentation and unfortunately I don't understand how to set a custom marker with a custom icon.</p>
  
  <p>In this sample bellow I set a position and marker, but I can't figure out how to set my custom marker with <code>.png</code> or <code>.svg</code> icons and set as the default marker.</p>
  
  <p><a href="https://developer.here.com/api-explorer/maps-js/v3.0" rel="nofollow noreferrer">Link to the docs of Here Maps</a></p>
  
  <pre><code>function addMarkersToMap(map) {
    var parisMarker = new H.map.Marker({
      lat: 48.8567,
      lng: 2.3508
    });
    map.addObject(parisMarker);
  
    var romeMarker = new H.map.Marker({
      lat: 41.9,
      lng: 12.5
    });
    map.addObject(romeMarker);
  
    var berlinMarker = new H.map.Marker({
      lat: 52.5166,
      lng: 13.3833
    });
    map.addObject(berlinMarker);
  
    var madridMarker = new H.map.Marker({
      lat: 40.4,
      lng: -3.6833
    });
    map.addObject(madridMarker);
  
    var londonMarker = new H.map.Marker({
      lat: 51.5008,
      lng: -0.1224
    });
    map.addObject(londonMarker);
  }
  
  // Initialize the platform object:
  const platform = new H.service.Platform({
    app_id: 'XXXXXXXXXXXXXX',
    app_code: 'XXXXXXXXXXX',
    useCIT: true,
    useHTTPS: true,
  });
  
  const maptypes = platform.createDefaultLayers();
  
  // Instantiate (and display) a map object:
  this.map = new H.Map(
    this.$el.querySelector('#mapContainer'),
    maptypes.normal.map, {
      zoom: 4,
      center: {
        lat: 50,
        lng: 5
      },
    },
  );
  
  var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
  
  // Create the default UI components
  var ui = H.ui.UI.createDefault(this.map, maptypes, 'pt-BR');
  
  // Now use the map as required...
  addMarkersToMap(this.map);
  </code></pre>
  
  <p>Thanks.</p>