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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Open other page or link when click on Marker

Thread ID:

Created:

Updated:

Platform:

Replies:

150971 Jan 26,2020 06:34 PM UTC Aug 21,2020 03:23 PM UTC ASP.NET Core - EJ 2 18
loading
Tags: Maps
Luigi
Asked On January 26, 2020 06:34 PM UTC

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

Baby Palanidurai [Syncfusion]
Replied On 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. 


Luigi
Replied On 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

Baby Palanidurai [Syncfusion]
Replied On 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. 


Luigi
Replied On January 27, 2020 02:02 PM UTC

Thank it's perfect!!

Baby Palanidurai [Syncfusion]
Replied On 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. 


Luigi
Replied On 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.

Baby Palanidurai [Syncfusion]
Replied On 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. 


Luigi
Replied On January 29, 2020 09:58 PM UTC

Thank.
You save my life :-)

Baby Palanidurai [Syncfusion]
Replied On 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. 


Luigi
Replied On 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

Luigi
Replied On February 3, 2020 10:52 AM UTC

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

Baby Palanidurai [Syncfusion]
Replied On 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. 


Luigi
Replied On February 4, 2020 09:17 AM UTC

Thank.


Baby Palanidurai [Syncfusion]
Replied On 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. 


yasir
Replied On August 18, 2020 06:57 PM UTC

How an we achieve same in React js

yasir
Replied On 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

Sharmi Murugan [Syncfusion]
Replied On 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. 


Indumathi Ravi [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon