We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to empty marker on map

Hello Team,

Based on API response, want to change markers on map. If, I received empty response then marker should be removed on map.


Yogesh Patil

3 Replies

SA Sabari Anand Senthamarai Kannan Syncfusion Team November 29, 2022 07:11 PM UTC

Hi Yogesh,


We can render markers in the Maps component based on the data for markers from remote server. You can follow the below steps to achieve your scenario.

  1. Create a Web API project for server side to provide the marker details. The latitude and longitude fields in the object are essential for the markers in Maps. You need to return the data source in web action method of Web API application same as the below structure.


  1. In the client side application, the data available in the server side (accessed using the hosted URL) must be received using AJAX requests. The received data in the client side must be in JSON format.
  2. Now, the JSON data must be set to the “dataSource” property in the “markerSettings” of the Maps component. For reference, we have created a sample to add a marker in the Maps dynamically.


  1. You can also customize the markers by adding the tooltip feature or changing the shape and size of the marker. Please refer to the below UG Document link for more details.



Please let us know if the above solution meets your requirement and let us know if you need any further assistance.



Sabari Anand

YP Yogesh Patil November 30, 2022 06:06 AM UTC

Hello Syncfusion,

Thanks for reply.

You have provided me to Add Marker on map. I have already implemented it. I need a solution on how to remove marker from map.


Yogesh Patil

IR Indumathi Ravi Syncfusion Team December 1, 2022 02:13 PM UTC

Hi Yogesh,


All the markers in the Maps component can be removed by setting empty array in the “markerSettings” property. Please find the code snippet below.


Code Snippet:

clearMarker() {

    this.mapInstance.layersCollection[0].markerSettings = [];



<ButtonComponent value="clear" onClick={this.clearMarker.bind(this)} style={'MarginLeft'='30px'}>

          Clear Marker


<MapsComponent id="maps"ref={(m) => (this.mapInstance = m)}></MapsComponent>


You can find the sample for your reference from the below link.



Please let us know if the above solution meet your requirement and let us know if you need any further assistance.

Live Chat Icon For mobile
Up arrow icon