none
By clicking Pushpin redirect to another page RRS feed

  • Question

  • I have four pushpins on map and want to click through to individual specific pages when each is clicked.

    I looked at your sample and tried to adapt:

    <div><input type="button" value="attachPushpinClickEvent" onclick="reDirect();" /></div>

    GetMap() etc

    function attachPushpinClickEvent(){ 
            var pushpinClick= Microsoft.Maps.Events.addHandler(pushpin, 'click', reDirect); 

    }

    function reDirect(){

    window.location = "~/Gar1.aspx";

    }

    My JavaScript is pretty suspect but where have I gone wrong.

    Thanks again for your previous help.

    Wednesday, February 25, 2015 2:58 PM

Answers

  • I'm not sure if window.location likes URL's that start with ~. '../Gar1.aspx' and '/Gar1.aspx' should work. Note that if your user will be going back to the map to click another pin it would be a good idea to open the pages in a new tab rather than making the user have to press the back button and the map page have to reload. This will make for a better user experience as they could be able to click multiple pushpins to open multiple pages, would not need to wait for the map page to reload, and it would also mean you only load the map once rather than a bunch of times which will reduce the number of transactions your application generates by a lot thus allowing you to use the maps under the free terms of use for longer.

    Here is a working example that lets you click a pushpin and opens a webpage in a new tab:

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
      <script type="text/javascript" src=http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0></script>
      
      <script type="text/javascript">
    	var map;
    	
    	function GetMap()
    	{	
    		map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
    			credentials: "YOUR_BING_MAPS_KEY"
    		});
    		
    		var pin = new Microsoft.Maps.Pushpin(map.getCenter());
    		pin.redirectUrl = 'http://bing.com';
    				
    		Microsoft.Maps.Events.addHandler(pin, 'click', function(e){
    			//Open page in new tab
    			window.open(e.target.redirectUrl);
    			
    			//Open page in same browser window
    			//window.location = e.target.redirectUrl;
    		});
    		
    		map.entities.push(pin);
    	}
    	</script>	
    </head>
    <body onload="GetMap();">
    	<div id='myMap' style=";width:800px;height:600px;"></div>
    </body>
    </html>
    Note that the forums removes the position style from the code sample. Set position to relative.

    http://rbrundritt.wordpress.com



    Wednesday, February 25, 2015 4:11 PM
  • You have a spelling mistake in your event handler. Yu have 'click,' which should be 'click'.

    http://rbrundritt.wordpress.com

    • Proposed as answer by Ricky_Brundritt Thursday, February 26, 2015 2:47 AM
    • Marked as answer by eharford Thursday, February 26, 2015 9:52 AM
    Thursday, February 26, 2015 2:47 AM

All replies

  • I'm not sure if window.location likes URL's that start with ~. '../Gar1.aspx' and '/Gar1.aspx' should work. Note that if your user will be going back to the map to click another pin it would be a good idea to open the pages in a new tab rather than making the user have to press the back button and the map page have to reload. This will make for a better user experience as they could be able to click multiple pushpins to open multiple pages, would not need to wait for the map page to reload, and it would also mean you only load the map once rather than a bunch of times which will reduce the number of transactions your application generates by a lot thus allowing you to use the maps under the free terms of use for longer.

    Here is a working example that lets you click a pushpin and opens a webpage in a new tab:

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
      <script type="text/javascript" src=http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0></script>
      
      <script type="text/javascript">
    	var map;
    	
    	function GetMap()
    	{	
    		map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
    			credentials: "YOUR_BING_MAPS_KEY"
    		});
    		
    		var pin = new Microsoft.Maps.Pushpin(map.getCenter());
    		pin.redirectUrl = 'http://bing.com';
    				
    		Microsoft.Maps.Events.addHandler(pin, 'click', function(e){
    			//Open page in new tab
    			window.open(e.target.redirectUrl);
    			
    			//Open page in same browser window
    			//window.location = e.target.redirectUrl;
    		});
    		
    		map.entities.push(pin);
    	}
    	</script>	
    </head>
    <body onload="GetMap();">
    	<div id='myMap' style=";width:800px;height:600px;"></div>
    </body>
    </html>
    Note that the forums removes the position style from the code sample. Set position to relative.

    http://rbrundritt.wordpress.com



    Wednesday, February 25, 2015 4:11 PM
  • Thanks for that, I regret I am still struggling. I have tried to incorporate your suggestions, what have done wrong:

         

    <scripttype="text/javascript"src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>


       

    <h2>Click on any site to see details...</h2>


       

    <divid='mapDiv'style="position:relative; width:900px; height:600px;"></div>


         

    <scripttype="text/javascript">


             

    varmap = null;

             

    functionGetMap() {

                 

    if(map == null&& isLoaded()) {

                 

    varmap = newMicrosoft.Maps.Map(document.getElementById("mapDiv"),

                      {credentials:

    "Creds"                   

                      });

                 

    varloc1 = newMicrosoft.Maps.Location(51.451346807, -2.526220073);

                 

    varloc2 = newMicrosoft.Maps.Location(51.455, -2.433);

                 

    varloc3 = newMicrosoft.Maps.Location(51.474, -2.491);

                 

    varloc4 = newMicrosoft.Maps.Location(51.413, -2.611);

                 

    varpin1 = newMicrosoft.Maps.Pushpin(loc1);

                  pin1.redirectUrl =

    '/Gar1.aspx';

                 

    varpin2 = newMicrosoft.Maps.Pushpin(loc2);

                 

    varpin3 = newMicrosoft.Maps.Pushpin(loc3);

                 

    varpin4 = newMicrosoft.Maps.Pushpin(loc4);

                  Microsoft.Maps.Events.addHandler(pin1,

    'click,', function(e){

                      window.open(e.target.redirectUrl);

                  });

                  map.entities.push(pin1);

                  map.entities.push(pin2);

                  map.entities.push(pin3);

                  map.entities.push(pin4);

                  map.setView({center: loc1, zoom: 12})

                  }

    else{

                      setTimeout(

    'GetMap();', 100);

                  }

              }

             

    functionisLoaded() {

                 

    returntypeof(Microsoft) != 'undefined'


                  &&

    typeof(Microsoft.Maps) != 'undefined'


                  &&

    typeof(Microsoft.Maps.Map) != 'undefined'


              }

              GetMap();

         

    </script>

    Wednesday, February 25, 2015 6:20 PM
  • You have a spelling mistake in your event handler. Yu have 'click,' which should be 'click'.

    http://rbrundritt.wordpress.com

    • Proposed as answer by Ricky_Brundritt Thursday, February 26, 2015 2:47 AM
    • Marked as answer by eharford Thursday, February 26, 2015 9:52 AM
    Thursday, February 26, 2015 2:47 AM
  • Rats! - I most grateful.
    Thursday, February 26, 2015 9:52 AM