1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Click on Marker

Click on Marker

Hello,
this is my code, how to pass model object to event click for open a page ?

@model HomeDettagliFilialiViewModels
@using Syncfusion.EJ2.Maps;
@{
    var tooltip = new MapsTooltipSettings
    {
        Visible = true,
        ValuePath="City"
    };
}


<ejs-maps id="maps" markerClick="markerClick">
    <e-maps-titlesettings alignment="@Syncfusion.EJ2.Maps.Alignment.Center" text="@Model.PageTitle"></e-maps-titlesettings>
    <e-maps-layers>
        <e-maps-layer shapeData="ViewBag.worldmap">
            <e-layersettings-markers>
                <e-layersettings-marker visible="true" height="20" width="20" animationDuration="0" dataSource="@Model.ListdettagliFiliales" tooltipSettings="tooltip">
                </e-layersettings-marker>
            </e-layersettings-markers>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

<style>
    #maps {
        display: block;
        height: 100%;
        width: 100%;
    }

    html, body {
        height: 100%;
        width: 100%;
        display: block;
    }

    .container {
        height: 100% !important;
        width: 100% !important;
    }
</style>
@*custom code start*@

<script>
    function markerClick(args) {
        var aEl = document.createElement('a');
        aEl.rel='nofollow' href = 'https://ej2.syncfusion.com/aspnetcore/Maps/Default#/material/' + args.ListdettagliFiliales.city;
        aEl.target = '_blank';
        aEl.click();
    }
</script>


5 Replies
MT Manikandan Thangapandian Syncfusion Team April 1, 2020 01:19 PM UTC

Hi Luigi,  
 
Thank you for contacting Syncfusion support. 
 
We have analyzed your code snippet and query. To assign a JavaScript function to the marker click event, you can assign the event function to the window object and call like below. 
 
 
<ejs-maps id="maps" markerClick="window.markerClick"> 
 
 
Now the marker click event will trigger that markerClick() function and that function will open new page. 
 
Please find the below sample project for your reference. 
 
  
Please let us know that the above sample meets your requirements. If not, please make the changes to reproduce the issue in the above sample and share the same to us. It will be helpful for us to analyze further and assist you better. 
 
Regards,  
Manikandan T

LU Luigi April 1, 2020 02:04 PM UTC

Hello,

in the events markerClick I need to pass an argument.

var data = new[]
{
new { latitude = 37.6276571, longitude = -122.4276688, name = "San Bruno"},
new { latitude = 33.5302186, longitude = -117.7418381, name = "Laguna Niguel"},
new { latitude = 40.7424509, longitude = -74.0081468, name = "New York"},
new { latitude = -23.5268201, longitude = -46.6489927, name = "Bom Retiro"},
new { latitude = 43.6533855, longitude = -79.3729994, name = "Toronto"},
new { latitude = 48.8773406, longitude = 2.3299627, name = "Paris"},
new { latitude = 52.4643089, longitude = 13.4107368, name = "Berlin"},
new { latitude = 19.1555762, longitude = 72.8849595, name = "Mumbai"},
new { latitude = 35.6628744, longitude = 139.7345469, name = "Minato"},
new { latitude = 51.5326602, longitude = -0.1262422, name = "London"}
<script>
    function markerClick(args) {
        var aEl = document.createElement('a');
        aEl.rel='nofollow' rel='nofollow' href = 'https://ej2.syncfusion.com/aspnetcore/Maps/Default#/material/' + args.Data.city;
        aEl.target = '_blank';
        aEl.click();
    }
</script>

But in code I don't use a data hard code, I use the @Model , how to pass data model to args in event markerClick ?
example:

@model HomeDettagliFilialiViewModels

<script>
    function markerClick(args) {
        var aEl = document.createElement('a');
        aEl.rel='nofollow' rel='nofollow' href = 'https://ej2.syncfusion.com/aspnetcore/Maps/Default#/material/' + args.@Model.ListdettagliFiliales.city;
        aEl.target = '_blank';
        aEl.click();
    }
</script>

Thank



LU Luigi April 2, 2020 06:55 AM UTC

It's possible use server event to open an url ?

LU Luigi April 2, 2020 09:52 AM UTC

Sorry I made a mistake, I wrote the variables incorrectly.

Incorrect:
<script>
    function markerClick(args) {
        var aEl = document.createElement('a');
        aEl.rel='nofollow' rel='nofollow' rel='nofollow' href = 'https://ej2.syncfusion.com/aspnetcore/Maps/Default#/material/' + args.Data.city;
        aEl.target = '_blank';
        aEl.click();
    }
</script>

Correct:
<script>
    function markerClick(args) {
        var aEl = document.createElement('a');
        aEl.rel='nofollow' rel='nofollow' rel='nofollow' href = 'https://ej2.syncfusion.com/aspnetcore/Maps/Default#/material/' + args.data.City;
        aEl.target = '_blank';
        aEl.click();
    }
</script>



SB Swetha Babu Syncfusion Team April 3, 2020 03:32 PM UTC

Hi Luigi, 

Thank you for the update. 

Please find the details for your queries from the following table. 

Query 
Details 
It's possible use server event to open an url ? 
We do not provide support for server side events in ASP.NET Core application. We can set the client side event to the event property of the component to trigger the event function. 

We have created a simple sample for your reference. 

Please find the sample link for the sample reference 

  
in the events markerClick I need to pass an argument. 
Yes, the solution you have provided is the way to get the arguments data from the event. 

Please let us know if you have any further assistance 

Regards, 
Swetha Babu

Loader.
Up arrow icon