none
Reload Bing Map's script with different localization RRS feed

  • Question

  • If the Bing Map script (v7) is loaded with one localization, is it possible to re-load it with a different localization on the same page? Right now I have to refresh the host page and load the control anew with the new localization code. I'm looking for a way to avoid the full page reload. 
    Tuesday, March 20, 2012 9:50 PM

Answers

  • Inspired by the lazy loading technique described by Ricky and using my understanding of the delay loading of Bing Maos, I found a solution which consists basicaly in removing all javascript references and css (got problem with removing them) and then reload the base script reference.

    This is not supported from my point.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Bing Maps - Change Localization on the fly</title>
        <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var map = null;
    		
            function getMap() {
                // Initialize the map
                map = new Microsoft.Maps.Map($('#map').get(0), {
                    credentials: "YOURKEY",
                    center: new Microsoft.Maps.Location(47.5, 2.75),
                    zoom: 4,
                    mapTypeId: Microsoft.Maps.MapTypeId.road
                });
            }
    
    		function changeCulture(oldCulture, newCulture) {
    			var scripts = ['veapidelay.js', 'veapicore.js', 'veapiAnalytics.js'];
    			var css = ['mapdelay.css', 'mapcontrol.css'];
    			// Remove old references of scripts and css
    			if(oldCulture != null) {
    				// CSS
    				$.each(css, function() {
    					$('link[href*="' + this + '"]').remove();
    				});	
    				
    				// JS
    				$.each(scripts, function() {
    					$('script[src="' + Microsoft.Maps.Globals.jsPath + this + '"]').remove();
    				});				
    				$('script[src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=' + oldCulture + '"]').remove();
    				
    				window.Microsoft = null;
    			}
    			
    			// Add new reference
    			if(newCulture != null) {
    				loadJsFile('http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=' + newCulture);
    				tryGetMap(100);
    			}
    		}
    		
    		function tryGetMap(interval) {
    			setTimeout(function() {
    			if(window.Microsoft != null) {
    				if((Microsoft.Maps != 'undefined') && 
    					(Microsoft.Maps.Map != 'undefined')) {
    						getMap();
    					}
    			} else {
    				tryGetMap(interval);
    			}
    			}, interval);
    		}
    		
    		function loadJsFile(file) {
    			var script = document.createElement("script");
    			script.setAttribute("type", "text/javascript");
    			script.setAttribute("src", file);
    			document.body.appendChild(script);
    		}
        </script>
    </head>
    <body onload="getMap()">
        <div id="map" style="position: relative; width: 800px; height: 600px;">
        </div>
    	<input type="button" onclick="changeCulture('en-US', 'de-DE')" value="Change to German" />
    </body>
    </html>
    

    Hope it will help you to go further.

    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/


    Wednesday, March 21, 2012 12:06 AM
    Moderator

All replies

  • Inspired by the lazy loading technique described by Ricky and using my understanding of the delay loading of Bing Maos, I found a solution which consists basicaly in removing all javascript references and css (got problem with removing them) and then reload the base script reference.

    This is not supported from my point.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Bing Maps - Change Localization on the fly</title>
        <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var map = null;
    		
            function getMap() {
                // Initialize the map
                map = new Microsoft.Maps.Map($('#map').get(0), {
                    credentials: "YOURKEY",
                    center: new Microsoft.Maps.Location(47.5, 2.75),
                    zoom: 4,
                    mapTypeId: Microsoft.Maps.MapTypeId.road
                });
            }
    
    		function changeCulture(oldCulture, newCulture) {
    			var scripts = ['veapidelay.js', 'veapicore.js', 'veapiAnalytics.js'];
    			var css = ['mapdelay.css', 'mapcontrol.css'];
    			// Remove old references of scripts and css
    			if(oldCulture != null) {
    				// CSS
    				$.each(css, function() {
    					$('link[href*="' + this + '"]').remove();
    				});	
    				
    				// JS
    				$.each(scripts, function() {
    					$('script[src="' + Microsoft.Maps.Globals.jsPath + this + '"]').remove();
    				});				
    				$('script[src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=' + oldCulture + '"]').remove();
    				
    				window.Microsoft = null;
    			}
    			
    			// Add new reference
    			if(newCulture != null) {
    				loadJsFile('http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=' + newCulture);
    				tryGetMap(100);
    			}
    		}
    		
    		function tryGetMap(interval) {
    			setTimeout(function() {
    			if(window.Microsoft != null) {
    				if((Microsoft.Maps != 'undefined') && 
    					(Microsoft.Maps.Map != 'undefined')) {
    						getMap();
    					}
    			} else {
    				tryGetMap(interval);
    			}
    			}, interval);
    		}
    		
    		function loadJsFile(file) {
    			var script = document.createElement("script");
    			script.setAttribute("type", "text/javascript");
    			script.setAttribute("src", file);
    			document.body.appendChild(script);
    		}
        </script>
    </head>
    <body onload="getMap()">
        <div id="map" style="position: relative; width: 800px; height: 600px;">
        </div>
    	<input type="button" onclick="changeCulture('en-US', 'de-DE')" value="Change to German" />
    </body>
    </html>
    

    Hope it will help you to go further.

    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/


    Wednesday, March 21, 2012 12:06 AM
    Moderator
  • Worked like a charm!

    Thanks Nicolas

    Thursday, March 22, 2012 1:01 AM