We use essential cookies for the website to function, as well as analytics cookies for analyzing and creating statistics of the website performance. To agree to the use of analytics cookies, click "Accept All". You can manage your preferences at any time by clicking "Cookie Settings" on the footer. More Information.

Cookie Settings
Only Essential Cookies
Accept All
MaterialsConsole

HMS Core

App Services
输入关键字搜索
HMS Core
AppGallery Connect
HUAWEI HiAI
CTRL+K
GuidesMap KitJavaScriptDrawing on a MapMarker

Marker

Last updated: 2026-03-04 08:44
Content overview
Expand

You can add markers to a map to identify locations such as stores and buildings, and provide location details with information windows.

Adding a Marker

Call HWMapJsSDK.HWMarker(markerOptions) to create a marker on the map.
Collapse
Word wrap
Dark theme
Copy code
  1. var map;
  2. var mMarker;
  3. 

  4. // Start the script callback.
  5. function initMap() {
  6.     var mapOptions = {};
  7.     mapOptions.center = {lat: 
    48.856613
    , lng: 
    2.352222
    };
  8.     mapOptions.zoom = 9;
  9.     
  10.     // Initialize the map.
  11.     map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);
  12. 

  13.     // Initialize the marker. 
  14.     mMarker = new HWMapJsSDK.HWMarker({
  15.         map: map,
  16.         position: {lat: 
    48.85
    , lng: 
    2.35
    },
  17.         zIndex: 
    10
    ,
  18.         label: {
  19.             text: '
    A
    ',
  20.             offsetY: 
    -30
    ,
  21.             fontSize: '
    20px
    '
  22.         },
  23.         icon: {
  24.             opacity: 
    0.5
    ,
  25.             scale: 
    1.2
    ,
  26.         }
  27.     });
  28. }

The sample code is to add a marker whose label is A and transparency is 0.5 at 48.85°N, 2.35°E, as shown in the figure below.

For details about custom attributes supported by markerOptions, please refer to MarkerOptions.

Customizing a Marker

Call HWMapJsSDK.HWMarker(markerOptions) and use the icon attribute to set a custom icon.

Collapse
Word wrap
Dark theme
Copy code
  1. mMarker = new HWMapJsSDK.HWMarker({
  2.     map: map,
  3.     position: {lat: 
    48.85
    , lng: 
    2.35
    },
  4.     label: {
  5.         text: '
    A
    ',
  6.         color: '
    #ffffff
    ',
  7.     },
  8.     // Set a customized icon.
  9.     icon: {
  10.         scale: 
    2
    ,
  11.         // Set the image URL.
  12.         url: '
    location-marker.png
    '
  13.     }
  14. });

Removing a Marker

Call the setMap() method and pass null as a parameter of the method to remove a marker from a map.

Collapse
Word wrap
Dark theme
Copy code
  1. mMarker.setMap(null);

Note that the previous method cannot be used to delete a marker. It simply removes the marker from the map. To delete a marker, you need to remove it from the map and set the marker itself to null.

Collapse
Word wrap
Dark theme
Copy code
  1. mMarker.setMap(null);
  2. mMarker = null;

Modifying a Marker

Call methods provided by HWMarker to modify attributes. For example, call the setPosition(position) method to change the marker position.

Collapse
Word wrap
Dark theme
Copy code
  1. <tr>
  2.     <td>Marker Lat:</td>
  3.     <td><input id="markerLatInput" type="text" value="
    48
    "/></td>
  4. </tr>
  5. <tr>
  6.     <td>Marker Lng:</td>
  7.     <td><input id="markerLngInput" type="text" value="
    1.5
    "/></td>
  8. </tr>
  9. <script>
  10.     var lat = Number(document.getElementById("markerLatInput").value);
  11.     var lng = Number(document.getElementById("markerLngInput").value);
  12.     mMarker.setPosition({lat: lat, lng: lng});
  13. </script>

The following table describes marker attributes that can be customized. For details, please refer to HWMarker Methods.

Expand

Attribute

Description

setIcon(icon)

Sets the icon of a marker.

setLabel(label)

Sets the label of a marker.

setPosition(position)

Sets the position of a marker.

setZIndex(zIndex)

Sets the Z-index of a marker.

Listening for Marker Events

The following table describes marker events. For details, please refer to HWMarker Events.

Expand

Event

Description

click

Click on a marker.

dbclick

Double-click on a marker.

icon_changed

Marker icon change.

mousedown

Mouse button press.

mouseup

Mouse button release.

position_changed

Position change.

The following sample code is to listen for marker tap events. To set this listener, call the addListener('click', callback) method of the HWMarker object.

Collapse
Word wrap
Dark theme
Copy code
  1. function handleClick() {
  2.       alert("On Marker Click!");
  3. }
  4. mMarker.addListener('click', handleClick);

Setting a Marker as Draggable

If a marker is set as draggable, users will be able to drag the marker to different positions on the map. To create a draggable marker, call the HWMapJsSDK.HWMarker(markerOptions) method and set draggable to true in MarkerOptions.
Collapse
Word wrap
Dark theme
Copy code
  1. function initMap() {
  2.     var mapOptions = {};
  3.     mapOptions.center = {lat: 48.856613, lng: 2.352222};
  4.     mapOptions.zoom = 9;
  5.     map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);
  6.     // Add a draggable marker on the map.
  7.     const marker = new HWMapJsSDK.HWMarker({
  8.         map,
  9.         position:{lat: 48.856613, lng: 2.352222},
  10.         draggable:true
  11.     })
  12. }

Animating a Marker

To animate a marker, call HWMapJsSDK.HWMarker(markerOptions), and set the animation attribute in MarkerOptions to specify an animation mode. Available animation modes are as follows:

  • DROP: Makes the marker fall when the marker is placed for the first time.
  • BOUNCE: Makes the marker bounce.
Collapse
Word wrap
Dark theme
Copy code
  1. function initMap() {
  2.     var mapOptions = {};
  3.     mapOptions.center = {lat: 48.856613, lng: 2.352222};
  4.     mapOptions.zoom = 9;
  5.     mapOptions.language = 'en'
  6. 

  7.     map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);
  8. 

  9.     marker = new HWMapJsSDK.HWMarker({
  10.         map: map,
  11.         position: {lat: 48.856613, lng: 2.352222},
  12.         icon: {
  13.             scale: 1,
  14.             url: 'imageurl'
  15.         },
  16.         // Specify an animation mode for the marker.
  17.         animation: 'DROP',
  18.     });
  19. }
Figure 1 DROP
Figure 2 BOUNCE

If you use component-based development in MVVM mode, call the marker.setAnimation(null) method to destroy the animation in time in the lifecycle method of the instance before instance destruction.

Collapse
Word wrap
Dark theme
Copy code
  1. marker.setAnimation(null);

Setting the Text Stroke

When multiple markers overlap on the map or a marker is displayed against the dark background, text labels of the markers will overlap and be unclear if the stroke is not set for them. To avoid this, call HWMapJsSDK.HWMarker(markerOptions) and set the strokeColor and strokeWeight attributes in MarkerLabelOption to set the stroke.

Collapse
Word wrap
Dark theme
Copy code
  1. function initMap() {
  2.     var mapOptions = {};
  3.     mapOptions.center = {lat: 48.856613, lng: 2.352222};
  4.     mapOptions.zoom = 9;
  5.     mapOptions.language = 'en'
  6. 

  7.     map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);
  8. 

  9.     marker = new HWMapJsSDK.HWMarker({
  10.         map: map,
  11.         position: {lat: 48.856613, lng: 2.352222},
  12.         zIndex: 10,
  13.         icon: {
  14.             scale:1,
  15.             url:'imageurl'
  16.         },
  17.         label: {
  18.             text:'A',
  19.             // Set the text stroke color. The default value is #FFF. 
  20.             strokeColor: '#00bcd4',
  21.             // Set the text stroke size. The default value is 0. 
  22.             strokeWeight: 1
  23.         },
  24.     });
  25. }

Drawing on a Map
Marker Clustering
English
©2026 HUAWEI Developers. All rights reserved.
Terms of Use
Statement About HUAWEI Developers and Privacy
Cookies
Cookie Settings
Open-Source Software Notice