title: Marker with custom image and text (HERE Maps)
body: <p>Do you know if it's possible to have a label in right side of icon like google maps function "MarkerWithLabel"?</p>
  
  <p>I already have a solution, it isn't my favorite (right side of the icon), I have in top of the icon like the sample:</p>
  
  <pre><code>function addSVGMarkers(map){
    //Create the svg mark-up
    var svgMarkup = '&lt;svg width="76px" height="53px" xmlns="http://www.w3.org/2000/svg"&gt;'+
    '&lt;g id="unload-plate" transform="translate(27.49994 17.5)"&gt;'+
      '&lt;g id="surface1"&gt;'+
        '&lt;path d="M0 0L1 1L0 0Z" transform="translate(9.48437 0)" id="Shape" fill="#FF7F00" stroke="none" /&gt;'+
        '&lt;path d="M10.6016 30.793L10.7266 30.793C13.0781 26.8164 15.3477 22.7891 17.6406 18.7773C18.2109 17.7813 18.7851 16.7813 19.3594 15.7891C19.7305 15.1523 20.1406 14.5391 20.4297 13.8594C21.5781 11.1875 21.6406 8.15625 20.543 5.45313C20.0781 4.30469 19.3867 3.26953 18.5664 2.34375C15.4687 -1.17187 10.0156 -2.07422 5.85937 0C3.73828 1.05859 2.09375 2.78906 1.04297 4.89453C0.4375 6.10938 0.0585928 7.52344 0 8.87891C-0.0742187 10.6016 0.21875 12.2734 0.898437 13.8594C1.56641 15.418 2.59375 16.8711 3.4375 18.3438C5.8125 22.4961 8.16797 26.6719 10.6016 30.793L10.6016 30.793Z" transform="translate(0.003907203 1.082031)" id="Shape" fill="#D73925" stroke="none" /&gt;'+
        '&lt;path d="M0 0L1 1L0 0Z" transform="translate(11.78906 0)" id="Shape" fill="#FF7F00" stroke="none" /&gt;'+
        '&lt;path d="M0 0L1 1L0 0Z" transform="translate(0.125 8.714844)" id="Shape" fill="#FF7F00" stroke="none" /&gt;'+
        '&lt;path d="M0 0L1 1L0 0Z" transform="translate(6.863278 9.402344)" id="Shape" fill="#FF0000" stroke="none" /&gt;'+
        '&lt;path d="M0 0L1 1L0 0Z" transform="translate(0 11.51563)" id="Shape" fill="#00A65A" stroke="none" /&gt;'+
        '&lt;path d="M0 0L1 1L0 0Z" transform="translate(21.14843 12.45313)" id="Shape" fill="#00A65A" stroke="none" /&gt;'+
        '&lt;path d="M0 0L0.999997 1L0 0Z" transform="translate(13.60156 26.76953)" id="Shape" fill="#00A65A" stroke="none" /&gt;'+
        '&lt;path d="M0 144.5C0 64.6892 66.442 0 148.477 0C230.512 0 296.954 64.6892 296.954 144.5C296.954 224.248 230.512 289 148.477 289C66.442 289 0 224.248 0 144.5L0 144.5Z" transform="matrix(0.0623782 0 0 0.0622568 1.4375 1.433594)" id="Shape" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1" /&gt;'+
        '&lt;path d="M8.85307 1.05859L14.1617 1.05859L14.1617 0L8.4976 0C8.10697 0 7.79057 0.316406 7.79057 0.707032L7.79057 8.23047L0.130413 10.2773C0.036663 10.3008 -0.0180244 10.3984 0.00541305 10.4961L0.189007 11.1758C0.212443 11.2734 0.3101 11.3281 0.407757 11.3047L9.21635 8.94532C9.27885 10.2578 10.3531 11.3086 11.6851 11.3086C13.0562 11.3086 14.1617 10.1992 14.1617 8.83204C14.1617 7.46485 13.0562 6.35938 11.6851 6.35938C10.6968 6.35938 9.85307 6.94141 9.45463 7.77344L8.85307 7.77344L8.85307 1.05859ZM11.6851 7.42188C12.4663 7.42188 13.0992 8.05469 13.0992 8.83204C13.0992 9.61329 12.4663 10.2461 11.6851 10.2461C10.9038 10.2461 10.2671 9.61329 10.2671 8.83204C10.2671 8.05469 10.9038 7.42188 11.6851 7.42188Z" transform="translate(3.619586 4.628906)" id="Shape" fill="#000000" fill-rule="evenodd" stroke="none" /&gt;'+
      '&lt;/g&gt;'+
    '&lt;/g&gt;'+
    '&lt;path d="M0 0L75 0L75 52L0 52L0 0Z" transform="translate(0.5 0.5)" id="Rectangle-2" fill="none" stroke="none" /&gt;'+
    '&lt;path d="M6.499 0L64.501 0C68.0903 0 71 2.9097 71 6.499L71 6.501C71 10.0903 68.0903 13 64.501 13L6.499 13C2.9097 13 0 10.0903 0 6.501L0 6.499C0 2.9097 2.9097 0 6.499 0Z" transform="translate(3.499939 2.499969)" id="Rectangle" fill="#000000" stroke="#000000" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" /&gt;'+
    '&lt;text x="38" y="12" font-size="11px" font-family="Arial" font-weight="bold" fill="white" text-anchor="middle"&gt;99-D-123456&lt;/text&gt;'+
  '&lt;/svg&gt;';
  
    // Add the first marker
    var bearsIcon = new H.map.Icon(
      svgMarkup.replace('${FILL}', 'blue').replace('${STROKE}', 'red')),
      bearsMarker = new H.map.Marker({lat: 41.8625, lng: -87.6166 },
        {icon: bearsIcon});
  
    map.addObject(bearsMarker);
  
  }
  
      function addSVGMarkers(map){
    //Create the svg mark-up
    var svgMarkup = '&lt;svg width="76px" height="53px" xmlns="http://www.w3.org/2000/svg"&gt;'+
    '&lt;g id="unload-plate" transform="translate(27.49994 17.5)"&gt;'+
      '&lt;g id="surface1"&gt;'+
        '&lt;path d="M0 0L1 1L0 0Z" transform="translate(9.48437 0)" id="Shape" fill="#FF7F00" stroke="none" /&gt;'+
        '&lt;path d="M10.6016 30.793L10.7266 30.793C13.0781 26.8164 15.3477 22.7891 17.6406 18.7773C18.2109 17.7813 18.7851 16.7813 19.3594 15.7891C19.7305 15.1523 20.1406 14.5391 20.4297 13.8594C21.5781 11.1875 21.6406 8.15625 20.543 5.45313C20.0781 4.30469 19.3867 3.26953 18.5664 2.34375C15.4687 -1.17187 10.0156 -2.07422 5.85937 0C3.73828 1.05859 2.09375 2.78906 1.04297 4.89453C0.4375 6.10938 0.0585928 7.52344 0 8.87891C-0.0742187 10.6016 0.21875 12.2734 0.898437 13.8594C1.56641 15.418 2.59375 16.8711 3.4375 18.3438C5.8125 22.4961 8.16797 26.6719 10.6016 30.793L10.6016 30.793Z" transform="translate(0.003907203 1.082031)" id="Shape" fill="#D73925" stroke="none" /&gt;'+
        '&lt;path d="M0 0L1 1L0 0Z" transform="translate(11.78906 0)" id="Shape" fill="#FF7F00" stroke="none" /&gt;'+
        '&lt;path d="M0 0L1 1L0 0Z" transform="translate(0.125 8.714844)" id="Shape" fill="#FF7F00" stroke="none" /&gt;'+
        '&lt;path d="M0 0L1 1L0 0Z" transform="translate(6.863278 9.402344)" id="Shape" fill="#FF0000" stroke="none" /&gt;'+
        '&lt;path d="M0 0L1 1L0 0Z" transform="translate(0 11.51563)" id="Shape" fill="#00A65A" stroke="none" /&gt;'+
        '&lt;path d="M0 0L1 1L0 0Z" transform="translate(21.14843 12.45313)" id="Shape" fill="#00A65A" stroke="none" /&gt;'+
        '&lt;path d="M0 0L0.999997 1L0 0Z" transform="translate(13.60156 26.76953)" id="Shape" fill="#00A65A" stroke="none" /&gt;'+
        '&lt;path d="M0 144.5C0 64.6892 66.442 0 148.477 0C230.512 0 296.954 64.6892 296.954 144.5C296.954 224.248 230.512 289 148.477 289C66.442 289 0 224.248 0 144.5L0 144.5Z" transform="matrix(0.0623782 0 0 0.0622568 1.4375 1.433594)" id="Shape" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1" /&gt;'+
        '&lt;path d="M8.85307 1.05859L14.1617 1.05859L14.1617 0L8.4976 0C8.10697 0 7.79057 0.316406 7.79057 0.707032L7.79057 8.23047L0.130413 10.2773C0.036663 10.3008 -0.0180244 10.3984 0.00541305 10.4961L0.189007 11.1758C0.212443 11.2734 0.3101 11.3281 0.407757 11.3047L9.21635 8.94532C9.27885 10.2578 10.3531 11.3086 11.6851 11.3086C13.0562 11.3086 14.1617 10.1992 14.1617 8.83204C14.1617 7.46485 13.0562 6.35938 11.6851 6.35938C10.6968 6.35938 9.85307 6.94141 9.45463 7.77344L8.85307 7.77344L8.85307 1.05859ZM11.6851 7.42188C12.4663 7.42188 13.0992 8.05469 13.0992 8.83204C13.0992 9.61329 12.4663 10.2461 11.6851 10.2461C10.9038 10.2461 10.2671 9.61329 10.2671 8.83204C10.2671 8.05469 10.9038 7.42188 11.6851 7.42188Z" transform="translate(3.619586 4.628906)" id="Shape" fill="#000000" fill-rule="evenodd" stroke="none" /&gt;'+
      '&lt;/g&gt;'+
    '&lt;/g&gt;'+
    '&lt;path d="M0 0L75 0L75 52L0 52L0 0Z" transform="translate(0.5 0.5)" id="Rectangle-2" fill="none" stroke="none" /&gt;'+
    '&lt;path d="M6.499 0L64.501 0C68.0903 0 71 2.9097 71 6.499L71 6.501C71 10.0903 68.0903 13 64.501 13L6.499 13C2.9097 13 0 10.0903 0 6.501L0 6.499C0 2.9097 2.9097 0 6.499 0Z" transform="translate(3.499939 2.499969)" id="Rectangle" fill="#000000" stroke="#000000" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" /&gt;'+
    '&lt;text x="38" y="12" font-size="11px" font-family="Arial" font-weight="bold" fill="white" text-anchor="middle"&gt;99-D-123456&lt;/text&gt;'+
  '&lt;/svg&gt;';
  
    // Add the first marker
    var bearsIcon = new H.map.Icon(
      svgMarkup.replace('${FILL}', 'blue').replace('${STROKE}', 'red')),
      bearsMarker = new H.map.Marker({lat: 41.8625, lng: -87.6166 },
        {icon: bearsIcon});
  
    map.addObject(bearsMarker);
  
  }
  
  </code></pre>
  
  <p><a href="http://jsfiddle.net/pafcosta/upends4z/4/" rel="nofollow noreferrer">http://jsfiddle.net/pafcosta/upends4z/4/</a></p>
  
  <p>Thanks
  /PC</p>