Open other page or link when click on Marker

[Luigi]

Hello,

it's possible when I click on Marker in Maps Open a new page example (www.site.com\city="Milano").

Thank

[Baby Palanidurai]

Hi Luigi, 

Greetings from Syncfusion. 

We have analyzed your query. We can achieve your requirement in maps markerClick event. This event will fire when we click on the map’s marker. In that event, you can open a new page example.  

Please find the below code snippet for your reference, 

<ejs-maps id="maps" markerClick="markerClick"> 

    <e-maps-layers> 

        <e-maps-layer shapeData="ViewBag.shapeData1"> 

            <e-layersettings-markers> 

                <e-layersettings-marker visible="true" dataSource="data" height="20" width="20" animationDuration="0"> 

                </e-layersettings-marker> 

            </e-layersettings-markers> 

        </e-maps-layer> 

    </e-maps-layers> 

</ejs-maps> 

 

<script> 

    function markerClick(args) { 

        var aEl = document.createElement('a'); 

        aEl.rel='nofollow' href = 'https://ej2.syncfusion.com/aspnetcore/Maps/Default#/material'; 

        aEl.target = '_blank'; 

        aEl.click(); 

    } 

</script> 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/markerClick1368402182 

Kindly revert us, if you have any concerns. 

Regards, 

Baby. 

[Luigi]

Thank.

You are the best !!

The example is ok, but the link is dynamic because change the city of the Marker.

Example, if I click on Milano the link https://ej2.syncfusion.com/aspnetcore/Maps/Default#/material/Milano

The link get the name of marker.

Thank

[Baby Palanidurai]

Hi Luigi, 

Thanks for your update. 

We have analyzed your query. You can get the name of marker as argument in the markerClick event. Using that name, you can make the dynamic link based on the marker. 

Code snippet: 

function markerClick(args) { 

        var aEl = document.createElement('a'); 

        aEl.rel='nofollow' href = 'https://ej2.syncfusion.com/aspnetcore/Maps/Default#/material/' +  

               args.data.name; 

        aEl.target = '_blank'; 

        aEl.click(); 

    } 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/markerClick1-1227806263 

Kindly revert us, if you have any concerns. 

Regards, 

Baby. 

[Luigi]

Thank it's perfect!!

[Baby Palanidurai]

Hi Luigi, 

Most welcome. Please let us know, if you have any other concerns. We are always happy to assist you. 

Regards, 

Baby. 

[Luigi]

Hi,

when my project start, the map in browse it small, I want to expand all windows (height 100% and Width 100%) but it does not work.

The map is small.

Thank.

[Baby Palanidurai]

Hi Luigi, 

Thanks for your update. 

We have analyzed your query. The maps will get the height and width from the parent element’s client width and client height by default. If the parent element is null, the maps will be rendered some default height and width. To get the window size, you need to set the display as a block, and height as 100% and width as 100% for maps parent elements.  

And then, if you are having more than elements including maps container elements as a child and you want to render the maps in the remaining space size from the window, you set “display: block” and flex-grow as 1 for maps container element style. And for other than maps element, set the “display: flex; height 100%;flex-flow:column;”. Then you will get the remaining height and width from the window for maps. 

Code snippet:  

<div id="container" style="display:block;height:100%"> 

    <ejs-maps id="maps" height="100%"width=”100%” markerClick="markerClick"> 

        <e-maps-layers> 

            <e-maps-layer shapeData="ViewBag.shapeData1"> 

                <e-layersettings-markers> 

                    <e-layersettings-marker visible="true" dataSource="data" height="20" width="20" animationDuration="0"> 

                    </e-layersettings-marker> 

                </e-layersettings-markers> 

            </e-maps-layer> 

        </e-maps-layers> 

    </ejs-maps> 

</div> 

 

<style> 

    #maps { 

        display: block; 

        height: 100%; 

        width: 100%; 

    } 

    html, body { 

        height: 100%; 

        width: 100%; 

        display: block; 

    } 

//This is parent class, and this is in layout page. 

    .container { 

        height: 100% !important; 

        width: 100% !important; 

    } 

</style> 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/markerClick2123010447 

If this is not your scenario, kindly modify the above sample or provide your sample to replicate the scenario which will be helpful in furthermore analysis and provide you the solution sooner. 

Regards, 

Baby. 

[Luigi]

Thank.

You save my life :-)

[Baby Palanidurai]

Hi Luigi, 

Most welcome. Please let us know, if you have any other concerns. We are always happy to assist you. 

Regards, 

Baby. 

[Luigi]

Hello,

can you help me ?

I try to integrate maps in my project but the maps is small.

In attach my project.

Thank.

Attachment: BaseDashboard_6d69a90c.7z

[Luigi]

Thank.

You are fantastic.

It's possible hide the logo of customer in the message ?

 

[Baby Palanidurai]

Hi Luigi, 

Thanks for your update. 

We have removed the previous update which has customer logo in the image. Please find the below response. In your previous sample, you haven’t set the styling for parent elements (div), and body, HTML tag as we have stated earlier. Now, we have added those styling changes and the map is rendered with full size. 

Code snippet: 

<style> 

    #maps { 

        display: block; 

        height: 100%; 

        width: 100%; 

    } 

 

    html, body { 

        height: 100%; 

        width: 100%; 

        display: block; 

    } 

 

    .container { 

        height: 100% !important; 

        width: 100% !important; 

    } 

</style> 

Sample link:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/BaseDashboard141900771 

If you are still facing any issues, kindly revert us. 

Regards, 

Baby. 

[Luigi]

Thank.

[Baby Palanidurai]

Hi Luigi, 

  

  

Most welcome. Please let us know, if you have any other concerns. We are always happy to assist you. 

 

Regards, 

Baby. 

[yasir]

How an we achieve same in React js

[yasir]

Hi Luigi, 

  

  

Most welcome. Please let us know, if you have any other concerns. We are always happy to assist you. 

 

Regards, 

Baby. 

Can you please give example for same scenario in React js

[Sharmi Murugan]

Hi Yasir, 

  

Thank you for your update. 

  

We are currently working to prepare the sample in React for the provided solution. However, we will update you with further details on August 21, 2020. 

  

Regards, 

Sharmi. 

[Indumathi Ravi]

Hi Yasir, 

  

Thank you for your patience. 

  

We have prepared the React sample for the previously provided solutions for the Maps control. Please find the application from the below link. 

  

https://www.syncfusion.com/downloads/support/directtrac/general/ze/MapsReactSample1222623953 

  

Please let us know if you need any further assistance. 

  

Regards, 

Indumathi