地図上に別の地図を表示できないリスナーイベント

Question

小さなGoogleマップを読み込むページを作成しようとしていて、うまくいきました。今私は同じlngと緯度を持つ別のGoogleマップを表示する大きなdivを示すマップイベントのクリックを追加したいと思います。 divは適切にGoogleのロゴとベージュの背景色が表示されていますが、地図はなく、問題を把握することはできません。私はビジュアルスタジオ2012に取り組んでおり、GoogleマップはJavaScriptを使って表示されています。

以下

は私のコードです：

<div id="map_canvas" class="mapDiv" style="visibility:hidden" > </div> 
    <div id="myModal" class="modal" style="display: none"> 
     <div class="modal-content"> 
     <span onclick="CloseMyDiv();" id="closeSpan" class="close">×</span> 
     <br /><br /> 
     <div id="modal-body" class="modal-body"> 
      Hello world ! 
     </div> 
     </div> 
    </div> 

私は繰り返し：モーダル-体の変化を、私は（して、マップ・キャンバスをクリックしたときに私は私の地図を表示していますどこ

var latlng; 

     function initialize(lng, lat) { 

      var myOptions = { 
       zoom: 17, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      var map = new google.maps.Map(
      document.getElementById("map_canvas"), 
      myOptions); 

      var marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       icon: "/Images/marker.png", 
       title: "This is the place." 
      }); 

      var contentString = 'Hello <strong>World</strong>!'; 
      var infowindow = new google.maps.InfoWindow({ 
       content: contentString 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map, marker); 
      }); 

      document.getElementById("map_canvas").style.visibility = 'visible'; 

      map.addListener('click', function (e) { 

      var myOptions2 = { 
       zoom: 17, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      var map2 = new google.maps.Map(
       document.getElementById("modal-body"), 
       myOptions2); 

      var marker2 = new google.maps.Marker({ 
       position: latlng, 
       map: map2, 
       icon: "/Images/marker.png", 
       title: "This is the place." 
      }); 

      var contentString2 = 'Hello <strong>World</strong>!'; 
      var infowindow2 = new google.maps.InfoWindow({ 
       content: contentString2 
      }); 

      google.maps.event.addListener(marker2, 'click', function() { 
       infowindow2.open(map2, marker2); 
      }); 

      document.getElementById("myModal").style.display = "block"; 
       }); 
     } 

はそれらが私のdivですGoogleロゴを追加して背景色を変更する）、マップを表示していないため、clickイベントの前にdiv内のマップを埋めるようにしましたが、同じ問題が残っています。

ヒント

注：マップキャンバスに関するすべてのコメントをして、私はmyModal divをonloadイベントで表示すると、マップが正しく表示されます！

Answer 1

1. modal-bodyのCSSには、幅と高さが設定されていることを確認してください。

2.地図を含むdiv、またはその親、または親の親（いずれの先祖）でもある時点でdisplay:noneが設定されていると、マップビューが正しく初期化されず、グレーマップのみが表示されます。マップが初期化された後でのみ、モーダルを表示することに気付きました。だから、マップのいずれか、正しく表示するmap2初期化する前にこのコード

document.getElementById("myModal").style.display = "block"; 

を実行するか、またはマップビューを再初期化でしょう視界変更後のマップ上resizeイベント、トリガ：関連おそらく

google.maps.event.trigger(map2,'resize'); 

はありませんあなたのケースでは、divのディメンションを含むマップが変更された場合は、triggerマップ上のイベントのサイズを変更する必要があります。