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
  1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Open other page or link when click on Marker

Open other page or link when click on Marker

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

18 Replies
BP Baby Palanidurai Syncfusion Team January 27, 2020 09:25 AM UTC

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> 


Kindly revert us, if you have any concerns. 

Regards, 
Baby. 


LU Luigi January 27, 2020 10:06 AM UTC

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

BP Baby Palanidurai Syncfusion Team January 27, 2020 01:06 PM UTC

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(); 
    } 


Kindly revert us, if you have any concerns. 

Regards, 
Baby. 


LU Luigi January 27, 2020 02:02 PM UTC

Thank it's perfect!!

BP Baby Palanidurai Syncfusion Team January 28, 2020 04:46 AM UTC

Hi Luigi, 

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

Regards, 
Baby. 


LU Luigi January 28, 2020 09:44 AM UTC

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.

BP Baby Palanidurai Syncfusion Team January 29, 2020 12:27 PM UTC

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> 



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. 


LU Luigi January 29, 2020 09:58 PM UTC

Thank.
You save my life :-)

BP Baby Palanidurai Syncfusion Team January 30, 2020 04:45 AM UTC

Hi Luigi, 

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

Regards, 
Baby. 


LU Luigi February 2, 2020 11:19 PM UTC

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

LU Luigi February 3, 2020 10:52 AM UTC

Thank.
You are fantastic.
It's possible hide the logo of customer in the message ?
 

BP Baby Palanidurai Syncfusion Team February 4, 2020 09:16 AM UTC

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> 

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

Regards, 
Baby. 


LU Luigi February 4, 2020 09:17 AM UTC

Thank.


BP Baby Palanidurai Syncfusion Team February 4, 2020 09:34 AM UTC

Hi Luigi, 
  

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

Regards, 
Baby. 


YA yasir August 18, 2020 06:57 PM UTC

How an we achieve same in React js

YA yasir replied to Baby Palanidurai August 18, 2020 06:58 PM UTC

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

SM Sharmi Murugan Syncfusion Team August 19, 2020 07:12 PM UTC

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. 


IR Indumathi Ravi Syncfusion Team August 21, 2020 03:23 PM UTC

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. 
  
  
Please let us know if you need any further assistance. 
  
Regards, 
Indumathi 


Loader.
Up arrow icon