none
Problem displaying Bing Map from website on Windows Mobile phone RRS feed

  • Question

  • Please can you help me solve a problem using a Bing Map on a WP website I have developed? The problem is that the Bing Map causes the display on the Windows Mobile phone to switch instantly to show the full-screen Bing Map instead of showing the website itself.

    Please see this web site, both on desktop and on Windows Mobile phone (I am testing using Nokia Lumia 720 with Windows Denim):

    http://www.lidia-foundation.com

    Ironically, I switched to use Bing Maps because Google Maps do not display correctly on Windows Mobile phones either!  I kinda hoped there would not be a problem using a MS Map product for display on MS Mobile phones :-) Many thanks if you are able to help solve this problem.


    If "Life's but a walking shadow, a poor player, That struts and frets his hour upon the stage", then how come I can't remember my lines?

    Monday, March 9, 2015 1:30 PM

Answers

  • If you want to use Bing Maps in your application you should either use the development API's or launch the built in maps application using protocol activation:

    http://blogs.bing.com/maps/2014/06/04/how-to-launch-maps-in-a-universal-app/

    If you want the maps to be integrated inside of your app you will need to use one of the Bing Maps API's. If you are developing in JavaScript you can use the Bing Maps V7 map control inside of a webbrowser control. Here are some resources:

    https://code.msdn.microsoft.com/Cross-Platform-Bing-Maps-e96600d5

    https://msdn.microsoft.com/en-us/library/gg427610.aspx

    https://www.bingmapsportal.com/ISDK/AjaxV7#CreateMap1

    If you are working with .NET you can use the built in map sin WP:

    https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn615001.aspx

    http://channel9.msdn.com/Series/Building-Apps-for-Windows-Phone-8-1/12


    http://rbrundritt.wordpress.com

    Monday, March 9, 2015 8:10 PM
  • Bing Maps is actually much easier to develop with. The code sample I pointed to is a bit more complex than it needs to be for your basic implementation, but that's only because it shows how to do a number of different things. Here is a simple code sample that fills all available space with a map:

    <!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;
       
       function getMap()
       {
    		Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', 
    		{ 
    			callback: function() { 
    			   map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    				credentials: 'Your Bing Maps Key', customizeOverlays: true
    			}); 
    		   } 
    		});
       }   
       </script>
       
       <style>
       html, body {
    		width: 100%;
    		height: 100%;
    		margin: 0;
    		padding: 0;
    	}
    	
    	#myMap {
    		;
    		width:100%;
    		height:100%;
    	}
       </style>
       </head>
       <body onload="getMap();"> 
       <div id='myMap'></div>
       </body>
    </html>

    I could of made this simpler without the overlays module, but I find this navigation bar is much better suited for mobile apps.

    Note: the forums removed the position CSS value of the map. Set position : relative.


    http://rbrundritt.wordpress.com

    Monday, March 9, 2015 8:49 PM

All replies

  • If you want to use Bing Maps in your application you should either use the development API's or launch the built in maps application using protocol activation:

    http://blogs.bing.com/maps/2014/06/04/how-to-launch-maps-in-a-universal-app/

    If you want the maps to be integrated inside of your app you will need to use one of the Bing Maps API's. If you are developing in JavaScript you can use the Bing Maps V7 map control inside of a webbrowser control. Here are some resources:

    https://code.msdn.microsoft.com/Cross-Platform-Bing-Maps-e96600d5

    https://msdn.microsoft.com/en-us/library/gg427610.aspx

    https://www.bingmapsportal.com/ISDK/AjaxV7#CreateMap1

    If you are working with .NET you can use the built in map sin WP:

    https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn615001.aspx

    http://channel9.msdn.com/Series/Building-Apps-for-Windows-Phone-8-1/12


    http://rbrundritt.wordpress.com

    Monday, March 9, 2015 8:10 PM
  • @Ricky Brundritt@

    Thanks a lot for your replies.  I needed a solution for displaying an embedded map (with a place marker) on a web site that was scrollable and resizeable by web users.  The solution had to work in all browsers and on all devices.  

    I can see that the API support in Bing Maps is very good.  But what I needed was a pre-packaged solution for use on my WP site.  This could have been either a way of using the Bing Maps web site, adding a place-marker, and then copying and pasting a "known working" script into a WP Text widget (but this does not work on Windows Phones).  Or a plug-in for WP developed and supported by MS that encompasses the same functionality.  Eventually I found the "Google Maps Widget" plugin and I now have a solution that meets these requirements.


    If "Life's but a walking shadow, a poor player, That struts and frets his hour upon the stage", then how come I can't remember my lines?

    Monday, March 9, 2015 8:38 PM
  • Bing Maps is actually much easier to develop with. The code sample I pointed to is a bit more complex than it needs to be for your basic implementation, but that's only because it shows how to do a number of different things. Here is a simple code sample that fills all available space with a map:

    <!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;
       
       function getMap()
       {
    		Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', 
    		{ 
    			callback: function() { 
    			   map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    				credentials: 'Your Bing Maps Key', customizeOverlays: true
    			}); 
    		   } 
    		});
       }   
       </script>
       
       <style>
       html, body {
    		width: 100%;
    		height: 100%;
    		margin: 0;
    		padding: 0;
    	}
    	
    	#myMap {
    		;
    		width:100%;
    		height:100%;
    	}
       </style>
       </head>
       <body onload="getMap();"> 
       <div id='myMap'></div>
       </body>
    </html>

    I could of made this simpler without the overlays module, but I find this navigation bar is much better suited for mobile apps.

    Note: the forums removed the position CSS value of the map. Set position : relative.


    http://rbrundritt.wordpress.com

    Monday, March 9, 2015 8:49 PM