新しいウィンドウでカスタムGoogleマップ

-1

私はhereのコードを終了しようとしています。しかし、私はJavaスクリプトの新機能として何かが間違っている、私の推測マップは単に正しく読み込まれていません。 DIVは新しいタブ、テキストにも作成されます。新しいタブでカスタムマップを開くのを手伝ってください。あなたは2番目のスクリプトオブジェクト内のinitialize（）関数を定義していないように見えます新しいウィンドウでカスタムGoogleマップ

<!DOCTYPE html> 
<html> 
<head> 
<title>test</title> 
</head> 
<body> 
    <script> 
    function newWindow() { 
    var w = window.open('', '_blank'); //you must use predefined window name here for IE. 
    var head = w.document.getElementsByTagName('head')[0]; 

    //Give some information about the map: 
    w.document.head.innerHTML = '<title>Simple Map</title></head>'; 
    w.document.body.innerHTML = '<body><H1>Loading</H1><div id="map_canvas" style="display: block; width: 500px; height: 300px; margin: 0; padding: 0;"></div></body>'; 

    var loadScript = w.document.createElement('script'); 
    //Link to script that load google maps from hidden elements. 
    loadScript.type = "text/javascript"; 
    loadScript.async = true; 
    loadScript.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"; 

    var googleMapScript = w.document.createElement('script'); 
    //Link to google maps js, use callback=... URL parameter to setup the calling function after google maps load. 
    googleMapScript.type = "text/javascript"; 
    googleMapScript.async = true; 
    googleMapScript.text = 'var mapOptions = {center: new google.maps.LatLng(50.4,30.50),zoom: 6, mapTypeId: google.maps.MapTypeId.TERRAIN}; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);'; 

    head.appendChild(loadScript); 
    head.appendChild(googleMapScript); 
    } 
    //addLoadEvent(loadScript); 
    </script> 
    <button onclick="newWindow()">Click me</button> 
</body> 
</html>

出典

2016-07-27 amberija

：ここコードです。

コードが

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 
</head> 
<body> 
    <script> 
    function newWindow() { 
     var w = window.open('', '_blank'); //you must use predefined window name here for IE. 
     var head = w.document.getElementsByTagName('head')[0]; 

     //Give some information about the map: 
     w.document.head.innerHTML = '<title>Simple Map</title></head>'; 
     w.document.body.innerHTML = '<body><H1>Loading</H1><div id="map_canvas" style="display: block; width: 500px; height: 300px; margin: 0; padding: 0;"></div></body>'; 

     var loadScript = w.document.createElement('script'); 
     //Link to script that load google maps from hidden elements. 
     loadScript.type = "text/javascript"; 
     loadScript.async = true; 
     loadScript.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"; 

     var googleMapScript = w.document.createElement('script'); 
     //Link to google maps js, use callback=... URL parameter to setup the calling function after google maps load. 
     googleMapScript.type = "text/javascript"; 
     googleMapScript.async = false; 
     googleMapScript.text = 'function initialize() {var mapOptions = {center: new google.maps.LatLng(50.4,30.50),zoom: 6, mapTypeId: google.maps.MapTypeId.TERRAIN}; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);}'; 

     head.appendChild(loadScript); 
     head.appendChild(googleMapScript); 
    } 
    //addLoadEvent(loadScript); 
</script> 
<button onclick="newWindow()">Click me</button> 
</body> 
</html>

あなたはjsbin上の例を見ることができるようになります。作品とあまりにもintercativeコーディングサイトのhttp://jsbin.com/loyaca/edit?html,output

出典

2016-07-27 19:36:31 xomena

おかげXomena、！ – amberija

答えを自由に受け入れてください。これは感謝の言葉です。 :) – xomena

新しいウィンドウでカスタムGoogleマップ

答えて

関連する問題