他のウィンドウからGoogleマップにポリラインを描画する方法

マップにポリラインを描画しようとしています。ポリラインを描画するスクリプトは、ポップアップウィンドウから定義され呼び出されます。他のウィンドウからGoogleマップにポリラインを描画する方法

 var route = new google.maps.Polyline({ 
      map: window.parent.map, 
      path: result.routeCoordinates, 
      geodesic: true, 
      strokeColor: '#00FF00', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     });

グローバル変数として定義されている「地図」と私がデバッグだとき、私は実際にwindow.parent.mapの内容が正しいことを確認。

はまだこのアプローチは私に次のエラーを与える： InvalidValueError：てsetMap：地図のないインスタンス

私は、このエラーについて他のスレッドを見つけましたが、私は、これらに基づいて私の問題を解決するために管理din't。

UPDATE：エラーを再現するためのコードです。まずマップを含むメインページ：（example2.htmlと呼ばれる）

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
<link rel="stylesheet" href="stylesheet.css" type="text/css" /> 

    <title>GMaps</title> 
    <!-- Google Maps API v3 --> 
    <script src = "https://maps.googleapis.com/maps/api/js"> 
    </script> 

    <script> 
    // Global variable 
    var map, infowindow; 

     function initialize(){ 
      var mapOptions = { 
       center: new google.maps.LatLng(-33.924717, 18.423328), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 


      map = new google.maps.Map(
         document.getElementById("map-canvas"), 
         mapOptions); 
      infoWindow = new google.maps.InfoWindow; 
      var marker = new google.maps.Marker({map: map, position : new google.maps.LatLng(-33.924717, 18.423328), icon: '/img/empty_small.png'}); 

      google.maps.event.addListener(marker, 'click', function() { 
       var htmlcontent = '<div class="popup"><iframe src="example2.html" frameborder="0" scrolling="yes" class="popop">iFrames required</iframe></div>'; 
       infoWindow.setContent(htmlcontent); 
       infoWindow.open(map, marker); 
      });  

     } 
     </script> 
</head> 
<body onLoad="initialize()"> 
    <div id = "map-canvas"> 
    </div> 
</body> 
</html>

は、第二に、ポップアップ・ウィンドウ：完全性については

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
<link rel="stylesheet" href="stylesheet.css" type="text/css" /> 

    <title>GMaps</title> 
    <!-- Google Maps API v3 --> 
    <script src = "https://maps.googleapis.com/maps/api/js"> 
    </script> 

    <script> 
    function drawPolyline() { 
     var coordinates = [ 
      {lat: -33.924717, lng: 18.423328}, 
      {lat: -33.924717, lng: 20.458451}, 
     ]; 
     var route = new google.maps.Polyline({ 
      map: window.parent.map, 
      path: coordinates, 
      geodesic: true, 
      strokeColor: '#00FF00', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 
     } 
     </script> 
</head> 
<body> 
    <a href="#" onclick="drawPolyline();return false;">Draw Polyline</a> 
</body> 
</html>

、スタイルシート内の関連するタグは、次のとおりです。

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

出典

2016-09-06 DiscoFever

問題を示す[mcve]を入力してください。 – geocodezip

@geocodezip投稿を編集しました。私にMCVEのページを指摘してくれてありがとう。 – DiscoFever

Maps JavaScript APIを2回読み込むことはおすすめできません。私は、このアプローチは、私のために働いた

<!DOCTYPE html> 
<html lang = "en"> 
    <head> 
     <link rel="stylesheet" href="stylesheet.css" type="text/css" /> 

     <title>GMaps</title> 

     <script> 
      function drawPolyline() { 
       var coordinates = [ 
        {lat: -33.924717, lng: 18.423328}, 
        {lat: -33.924717, lng: 20.458451}, 
       ]; 
       var route = new window.parent.google.maps.Polyline({ 
        map: window.parent.map, 
        path: coordinates, 
        geodesic: true, 
        strokeColor: '#00FF00', 
        strokeOpacity: 1.0, 
        strokeWeight: 2 
       }); 
      } 
     </script> 
    </head> 
    <body> 
     <a href="#" onclick="drawPolyline();return false;">Draw Polyline</a> 
    </body> 
</html>

コード内であなたのポップアップページからMaps JavaScript APIの負荷を取り除くとwindow.parent.google.maps.Polylineを使用してお勧めします。

出典

2016-09-08 08:41:14 xomena

ありがとう、私の問題を解決しました。私はupvoteしたかったが、残念ながら私は十分な評判を得ていない。 – DiscoFever

他のウィンドウからGoogleマップにポリラインを描画する方法

答えて

関連する問題