Search code examples
javascriptmapsmarkershere-api

how do i add a custom image marker in here maps?


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,
 components: [new nokia.maps.map.component.Behavior(), 
 new nokia.maps.map.component.ZoomBar(), 
 new nokia.maps.map.component.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!?


Solution

  • 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 recommend for new developments to use the latest 3.0 version.

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

       /**
         * Step 1: initialize communication 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 components
        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);