how can add a custom image marker in here map, i can add markers in map by using this code:

 var map, standardMarker;
 map = new nokia.maps.map.Display(mapContainer, {
 center: [lat, log],
 zoomLevel: 12,
 ponents: [new nokia.maps.mapponent.Behavior(), 
 new nokia.maps.mapponent.ZoomBar(), 
 new nokia.maps.mapponent.TypeSelector()]
  });
 standardMarker = new nokia.maps.map.StandardMarker(map.center);
 map.objects.add(standardMarker);

​

but the problem is map contains many markers ,so i need small custom markers. can anyone help me!?

how can add a custom image marker in here map, i can add markers in map by using this code:

 var map, standardMarker;
 map = new nokia.maps.map.Display(mapContainer, {
 center: [lat, log],
 zoomLevel: 12,
 ponents: [new nokia.maps.map.ponent.Behavior(), 
 new nokia.maps.map.ponent.ZoomBar(), 
 new nokia.maps.map.ponent.TypeSelector()]
  });
 standardMarker = new nokia.maps.map.StandardMarker(map.center);
 map.objects.add(standardMarker);

​

but the problem is map contains many markers ,so i need small custom markers. can anyone help me!?

• javascript
• maps
• markers
• here-api

2 Answers 2

nokia.maps are old version of the HERE map JavaScript API version 2.5, you can use new version of HERE map JS API 3.0. I remend for new developments to use the latest 3.0 version.

https://developer.here./documentation and some examples http://developer.here./api-explorer

   /**
     * Step 1: initialize munication with the platform
     */
    var platform = new H.service.Platform({
        app_id: hereMapAppID,
        app_code: hereMapAppCode,
        useHTTPS: true,
        useCIT: false
    });
    var defaultLayers = platform.createDefaultLayers();

    var mapContainer = document.getElementById('hereMapDivId');

    //Step 2: initialize a map  - not specificing a location will give a   whole world view.
    var map = new H.Map(mapContainer,
            defaultLayers.normal.map,{
            center: {lat: 53.430, lng: -2.961},
            zoom: 7
            });

    //Step 3: make the map interactive
    // MapEvents enables the event system
    // Behavior implements default interactions for pan/zoom (also on                         mobile touch environments)
    var behavior = new H.mapevents.Behavior(new    H.mapevents.MapEvents(map));

    // Create the default UI ponents
    var ui = H.ui.UI.createDefault(map, defaultLayers);

    var yourMarker  =   baseUrl+'/images/ico/your_marker.png';
    var icon = new H.map.Icon(yourMarker);
    marker = new H.map.Marker(map.center, { icon: icon });
    var group = new H.map.Group();
    map.addObject(group);
    group.addObject(marker);

Add Custom Marker From Your System

function addMarkerToGroup(group, coordinate, html) {
  var marker = new H.map.Marker(coordinate,{ icon: pngIcon });
  // add custom data to the marker
  marker.setData(html);
  group.addObject(marker);
}

var yourMarker  =  '<PATH_OF_IMG/IMG_NAME>';
var pngIcon = new H.map.Icon(yourMarker, {size: {w: 56, h: 56}});