Googleマップjavascript api key

Question

私はコードブラウザアプリケーションを使用しており、マップ用のブラウザキーを持っています。このlocastorageが

"https://maps.googleapis.com/maps/api/js?key=AIzaSyBHJxzPHD_egYnhxntqcvfem35YRjruzAg&callback=initMap"

を与える

localStorage.getItem("MapCode") 

として

<script async defer 

     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHJxzPHD_egYnhxntqcvfem35YRjruzAg&callback=initMap"> 
</script> 

が、私は、サーバーからの私のキーをしたい、私が取って、私は、このキーを保存しますだから私はこれをsrcに書きたいと思いますが、できませんでした。

<script async defer 

      src=localStorage.getItem("MapCode")> 
    </script> 

私はこの問題を解決するにはどうすればよい？事前

Answer 1

のおかげであなたは、GoogleマップのJavaScript APIを動的にロードすることができます。この目的のためには、次のコードを作成することができます。

function loadScript() { 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = localStorage.getItem("MapCode"); 
    document.body.appendChild(script); 
} 

window.onload = loadScript; 

サンプルコードを見てくださいをhttp://jsbin.com/carobun/edit?html,output

コードスニペット：

var map; 
 

 
function initialize() { 
 
    var c = new google.maps.LatLng(54.8867537,-1.557352); 
 
    var mapOptions = { 
 
     zoom:7, 
 
     center: c 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
} 
 
    
 
function loadScript() { 
 
    var script = document.createElement('script'); 
 
    script.type = 'text/javascript'; 
 
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3' + 
 
     '&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initialize'; 
 
    document.body.appendChild(script); 
 
} 
 

 
window.onload = loadScript;

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<div id="map-canvas"></div>