Map Controls

You can use the scaleControl and scaleControlOptions attributes to specify whether to display the scale and set the scale unit, respectively. The default value of scaleControl is false, indicating that the scale is not displayed. If this attribute is set to true, the scale will be displayed in the lower right corner of the map.

var mapOptions = {};
mapOptions.center = {lat: 48.856613, lng: 2.352222};
mapOptions.zoom = 10;
// Set to display the scale.
mapOptions.scaleControl = true; 
mapOptions.scaleControlOptions = {
	// Set the scale unit to inch. 
	units: "imperial" 
};

You can use the zoomSlider attribute to specify whether to display the zoom slider. The default value is false, indicating that the zoom slider is not displayed. If the attribute is set to true, the zoom slider will be displayed in the lower right corner of the map.

var mapOptions = {};
mapOptions.center = {lat: 48.856613, lng: 2.352222};
mapOptions.zoom = 10;
// Set that the zoom slider is displayed.
mapOptions.zoomSlider = true;      

You can use the zoomControl attribute to specify whether to display the zoom button. The default value is true, indicating that the zoom button is displayed in the lower right corner of the map. If this attribute is set to false, the zoom button will not be displayed.

var mapOptions = {};
mapOptions.center = {lat: 48.856613, lng: 2.352222};
mapOptions.zoom = 10;
// Set that the zoom buttons are not displayed.
mapOptions.zoomControl = false;      

You can use the rotateControl attribute to specify whether to display the compass. The default value is false, indicating that the compass is not displayed. If this attribute is set to true, the compass will be automatically displayed in the upper right corner of the map when the map does not head north.

var mapOptions = {};
mapOptions.center = {lat: 48.856613, lng: 2.352222};
mapOptions.zoom = 10;
// Set that the compass is displayed.
mapOptions.rotateControl= true;      

You can use the navigationControl attribute to specify whether to display the pan button. The default value is false, indicating that the pan button is not displayed. If the attribute is set to true, the pan button will be displayed in the upper right corner of the map.

var mapOptions = {};
mapOptions.center = {lat: 48.856613, lng: 2.352222};
mapOptions.zoom = 10;
// Set that the pan button is displayed. 
mapOptions.navigationControl= true;       

You can use the copyrightControl and copyrightControlOptions attributes to specify whether to display copyright information and customize the copyright information and style. The default value of copyrightControl is false, indicating that the copyright information is not displayed.

var mapOptions = {};
mapOptions.center = {lat: 48.856613, lng: 2.352222};
mapOptions.zoom = 10;
// Set that the copyright information is displayed.
mapOptions.copyrightControl = true;    
// Set the copyright information.
mapOptions.copyrightControlOptions = {value: "<div  style='position: absolute;left:170px;bottom:32px;'><font>Huawei Search © </font><a href='https://developer.huawei.com/consumer/cn/doc/development/HMS-Guides/hms-map-js-base-map'>HMS Map</a><font> contributors</font></div>"}

You can use the locationControl attribute to specify whether to display the my-location icon. The default value is false, indicating that the my-location icon is not displayed. If the attribute is set to true, the my-location icon will be displayed in the lower right corner of the map. (This control is supported only in HTML5 browsers.)

var mapOptions = {}; 
mapOptions.center = {lat: 48.856613, lng: 2.352222}; 
mapOptions.zoom = 10; 
// Set that the my-location button is displayed.
mapOptions.locationControl= true;