CODEWITHSUNDEEP
javascriptmapsmarkershere-api
Rkn
Rkn

Reputation: 120

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!?

Upvotes: 0

Views: 4887

Answers (2)

Patel Vaghesh
Patel Vaghesh

Reputation: 73

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}});

Upvotes: 1

Elby
Elby

Reputation: 1674

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);

Upvotes: 4

Related Questions