Click on Marker

[Luigi]

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>

[Manikandan Thangapandian]

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. 

 

 https://www.syncfusion.com/downloads/support/directtrac/general/ze/Map_sample-asp.core1050443260.zip 

  

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

[Luigi]

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/' + [e-mail];

        aEl.target = '_blank';

        aEl.click();

    }

</script>

Thank

[Luigi]

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

[Luigi]

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>

[Swetha Babu]

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  https://www.syncfusion.com/downloads/support/forum/152897/ze/MapsMArker554560219
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