none
[SOLVED] GetMap map = declaration does not recognize variables passed in. RRS feed

  • Question

  • Hi,

    Hopefully a rather simple question:

    I'm trying to pass variables into my GetMap function, and inside the function, they are recognized, but the second I go within map = new ... scope and try to use the variables, they break. Is there anyway to do something like the following?

     

     

    function GetMap(URL_lat, URL_long, URL_zoom)
    {
     map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
     {
     credentials: "KEY",
     center: new Microsoft.Maps.Location(URL_lat, URL_long),
     mapTypeId: Microsoft.Maps.MapTypeId.road,
     zoom: URL_zoom
     });
    }
    

     


    Thanks for reading!

     

    Kevin



    • Edited by kevin-berry Friday, June 17, 2011 9:02 PM
    • Moved by Ricky_Brundritt Friday, March 9, 2012 6:12 PM (From:Bing Maps: Map Control and Web services Development)
    Friday, June 17, 2011 11:52 AM

Answers

  • I'm almost certain the issue is with the variables you arte passing in. I assume you are grabbing them from a URL. If that is the case be sure to parse the string values to floats (parseFloat) or int's before passing into the GetMap function. If your variable are strings then a valid location object will not be created.

    As a test the following worked for me:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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 = null;     
    
         function GetMap(lat, lon, zoom)
         {
          // Initialize the map
          map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                 {credentials:"Bing Maps Key",
    			 center: new Microsoft.Maps.Location(lat,lon),
    			 mapTypeId: Microsoft.Maps.MapTypeId.road,
    			 zoom: zoom
    			}); 
    
         }
    
       </script>
      </head>
      <body onload="GetMap(45, -110, 10);">
       <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      </body>
    </html>
    



    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    • Marked as answer by kevin-berry Friday, June 17, 2011 6:52 PM
    Friday, June 17, 2011 12:14 PM
  • Setting the map type as you are will not work. There is a couple approaches you can take to support this. One is to use a switch statement that can be used to pick the right map type, be sure to have a default map style in case invalid data is passed (safest method). Another method is to create a string as you are and then use eval to turn it into JavaScript (not the best method but works). Another method is to pass in the value of the map style. The map styles are essentially just an enumerator that has a string value. For example Microsoft.Maps.MapTypeId.road = "r". This method is better than the eval method but not as safe as the switch statement method, but is good if you want to be able to set the URL based on the current map style.
    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    • Proposed as answer by Ricky_Brundritt Saturday, June 18, 2011 12:00 PM
    • Marked as answer by kevin-berry Saturday, June 18, 2011 8:32 PM
    Saturday, June 18, 2011 12:00 PM
  • Ah, yes. I saw your code and confused your notation with how you set the map view. You just need to pass in the map type. Here is the switch statement you need:

     

    switch(URL_maptype)
    {
    	case "birdseye"
    		map.setMapType(Microsoft.Maps.MapTypeId.birdseye);
    		break;
    	case "aerial":
    		map.setMapType(Microsoft.Maps.MapTypeId.aerial);
    		break;
    	case "auto":
    		map.setMapType(Microsoft.Maps.MapTypeId.auto);	
    		break
    	default:
    		map.setMapType(Microsoft.Maps.MapTypeId.road);
    		break;
    }
    



    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    • Marked as answer by kevin-berry Saturday, June 18, 2011 8:32 PM
    Saturday, June 18, 2011 6:59 PM
  • That's birdseye. In V7 enhanced Birdseye is just birdseye when zoomed in close enough.


    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    • Marked as answer by kevin-berry Saturday, June 18, 2011 8:32 PM
    Saturday, June 18, 2011 8:17 PM

All replies

  • I'm almost certain the issue is with the variables you arte passing in. I assume you are grabbing them from a URL. If that is the case be sure to parse the string values to floats (parseFloat) or int's before passing into the GetMap function. If your variable are strings then a valid location object will not be created.

    As a test the following worked for me:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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 = null;     
    
         function GetMap(lat, lon, zoom)
         {
          // Initialize the map
          map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                 {credentials:"Bing Maps Key",
    			 center: new Microsoft.Maps.Location(lat,lon),
    			 mapTypeId: Microsoft.Maps.MapTypeId.road,
    			 zoom: zoom
    			}); 
    
         }
    
       </script>
      </head>
      <body onload="GetMap(45, -110, 10);">
       <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      </body>
    </html>
    



    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    • Marked as answer by kevin-berry Friday, June 17, 2011 6:52 PM
    Friday, June 17, 2011 12:14 PM
  • Yes, that indeed was the issue. Thanks!
    Friday, June 17, 2011 6:52 PM
  • Hi, sorry, another quick question... do I need to cast the map type as anything? For example, this does not properly set the map:

     

     

    function GetMap(URL_lat, URL_long, URL_zoom, URL_maptype)
    {
    URL_maptype = "Microsoft.Maps.MapTypeId." + URL_maptype;
    alert(URL_maptype);
     map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
     {
      credentials: "KEY",
      center: new Microsoft.Maps.Location(URL_lat, URL_long),
      mapTypeId: URL_maptype,
      zoom: URL_zoom
     });
    }
    

    I'm thinking I need to cast URL_maptype as something before calling it in map =.

     


    Friday, June 17, 2011 8:56 PM
  • Setting the map type as you are will not work. There is a couple approaches you can take to support this. One is to use a switch statement that can be used to pick the right map type, be sure to have a default map style in case invalid data is passed (safest method). Another method is to create a string as you are and then use eval to turn it into JavaScript (not the best method but works). Another method is to pass in the value of the map style. The map styles are essentially just an enumerator that has a string value. For example Microsoft.Maps.MapTypeId.road = "r". This method is better than the eval method but not as safe as the switch statement method, but is good if you want to be able to set the URL based on the current map style.
    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    • Proposed as answer by Ricky_Brundritt Saturday, June 18, 2011 12:00 PM
    • Marked as answer by kevin-berry Saturday, June 18, 2011 8:32 PM
    Saturday, June 18, 2011 12:00 PM
  • Hi,

     

    For some reason, I'm getting the error

    missing ) after argument list
     
    when trying to execute this kind of code:
    switch(URL_maptype)
    						{
    							case null:
    								map.setMapType(mapTypeId:Microsoft.Maps.MapTypeId.road);
    								break;
    							case "aerial":
    								map.setMapType(mapTypeId:Microsoft.Maps.MapTypeId.aerial);
    								break;
    							case "auto":
    								map.setMapType(mapTypeId:Microsoft.Maps.MapTypeId.auto);	
    								break;
    

    Why is that? It seems syntactically correct to me...
    Saturday, June 18, 2011 5:01 PM
  • The issue is that your making the object a string and you need to pass a single object in. Note that:

    map.setMapType(mapTypeId:"Microsoft.Maps.MapTypeId.road");

    is not the same as

    map.setMapType({mapTypeId: Microsoft.Maps.MapTypeId.road});

    You switch statement should look like this:

    switch(URL_maptype)
    {
    	case "birdseye"
    		map.setMapType({mapTypeId:Microsoft.Maps.MapTypeId.birdseye});
    		break;
    	case "aerial":
    		map.setMapType({mapTypeId:Microsoft.Maps.MapTypeId.aerial});
    		break;
    	case "auto":
    		map.setMapType({mapTypeId:Microsoft.Maps.MapTypeId.auto});	
    		break
    	default:
    		map.setMapType({mapTypeId:Microsoft.Maps.MapTypeId.road});
    		break;
    }
    





    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Saturday, June 18, 2011 5:28 PM
  •  

    Weird. In the documentation it does not mention anything about curly braces or passing in an object... http://msdn.microsoft.com/en-us/library/gg427609.aspx

     

    That said, I'm not getting any errors, but when I pass in URL_maptype as "EnhancedBirdseye" (which seems to be coming up - where the satellite photo turns to birdseye) and call

    map.setMapType({mapTypeId:Microsoft.Maps.MapTypeId.enhancedbirdseye});

    or even if I just use "birdseye" and call MapTypeId.birdseye .... the map does not change at all from the normal automatic or road map. I'm not sure why not.

     

     

    	function setMaptype(URL_maptype)
    					{
    						switch(URL_maptype)
    						{
    							case null:
    								map.setMapType({mapTypeId:Microsoft.Maps.MapTypeId.road});
    								break;
    							case "aerial":
    								map.setMapType({mapTypeId:Microsoft.Maps.MapTypeId.aerial});
    								break;
    							case "auto":
    								map.setMapType({mapTypeId:Microsoft.Maps.MapTypeId.auto});	
    								break;
    							case "birdseye":
    								map.setMapType({mapTypeId:Microsoft.Maps.MapTypeId.birdseye});
    								break;
    							case "EnhancedBirdseye":
    								map.setMapType({mapTypeId:Microsoft.Maps.MapTypeId.EnhancedBirdseye});
    								break;
    ...
    							default:
    								map.setMapType({mapTypeId:Microsoft.Maps.MapTypeId.road});
    								break;
    						}
    					}
    					
    					//After all that processing, now we draw the map
    					GetMap(URL_lat, URL_long, URL_zoom);
    					setMaptype(URL_maptype);

    Maybe it's because I set my default in GetMap, but I thought calling my setMaptype function after instantiating the map would make this moot.

     

    function GetMap(URL_lat, URL_long, URL_zoom)
    {
    	map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
    	{
    		credentials: "KEY",
    		center: new Microsoft.Maps.Location(URL_lat, URL_long),
    		mapTypeId: Microsoft.Maps.MapTypeId.road,
    		zoom: URL_zoom
    	});
    }
    


     



    Saturday, June 18, 2011 5:48 PM
  • Ah, yes. I saw your code and confused your notation with how you set the map view. You just need to pass in the map type. Here is the switch statement you need:

     

    switch(URL_maptype)
    {
    	case "birdseye"
    		map.setMapType(Microsoft.Maps.MapTypeId.birdseye);
    		break;
    	case "aerial":
    		map.setMapType(Microsoft.Maps.MapTypeId.aerial);
    		break;
    	case "auto":
    		map.setMapType(Microsoft.Maps.MapTypeId.auto);	
    		break
    	default:
    		map.setMapType(Microsoft.Maps.MapTypeId.road);
    		break;
    }
    



    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    • Marked as answer by kevin-berry Saturday, June 18, 2011 8:32 PM
    Saturday, June 18, 2011 6:59 PM
  • That did the trick! Now one final question... the URL_maptype variable returns EnhancedBirdseye... but what is the MS.Maps.MapType designation for that? Enhancedbirdseye, enhancedbirdseye,enhancedBirdseye... or something else?
    Saturday, June 18, 2011 7:34 PM
  • That's birdseye. In V7 enhanced Birdseye is just birdseye when zoomed in close enough.


    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    • Marked as answer by kevin-berry Saturday, June 18, 2011 8:32 PM
    Saturday, June 18, 2011 8:17 PM
  • Alright. Thanks! Looks like I've got a bunch of "Mark as Answers" to put down. Haha. I notice sometimes when I load my map, then change from road to birdseye, all it does is squish the map - it doesn't overlay the satellite imagery unless i zoom out first. It doesn't seem like very consistent behaviour, so I'm going to assume it has to do with perhaps the page not having fully loaded all it needs to by the time I decide to change map types?

     

    At any rate, thank you so much for your guidance. :)

    Saturday, June 18, 2011 8:32 PM