Using Toggle on the map marker

I want to know how to use toggle in the map marker so that I can display country name in a pop up box using toggle of jquery or javascript

the scenario is : I click on a marker the pop up displays and it stays there and then if I click the second map marker the pop up of the first marker closes and then if the second marker in which its pop up is active is being clicked the second time around it will close the said pop up

Anyway Here's the from my boss that maybe it clear things up

Clicking once on a marker should display its pop up. If a marker is currently active or display its pop up and a user clicks on a different marker, that new marker should display its pop up . No two dots can be active at the same time.
Clicking a second time on an active marker should remove its pop up 


1 Reply

SK Sanjith Kesavan Syncfusion Team December 13, 2017 12:54 PM UTC


Hi Kyle, 

Thanks for contacting Syncfusion support. We have analyzed your query and prepared sample as per your requirement. In the sample, we have subscribed the “markerSelected” event and written the below code.  

[JS] 
var previourMarker = ""; 
        function markerSelected(args) { 
            if (previourMarker != args.originalEvent.data.Name) { 
                document.getElementById("popup").style.visibility = "visible"; 
                document.getElementById("popup").innerHTML = "Selected Marker is - " + args.originalEvent.data.Name; 
                previourMarker = args.originalEvent.data.Name; 
            } 
            else { 
                document.getElementById("popup").innerHTML = ""; 
                previourMarker = ""; 
                document.getElementById("popup").style.visibility = "hidden"; 
            } 
 
        } 

In the above code, if the text content is existing in pop-up is not same as clicked marker name then we have changed the existing pop content with new marker name. If both are same then we have emptied the content in pop-up. In the below link, we have attached sample for your reference.  

Sample link: Sample 

Please let us know if you have any concern.  

Thanks, 
Sanjith. 



Loader.
Up arrow icon