3

ボタンをクリックすると画面にポップアップする div 内にある Google マップに問題があります。Google マップは部分的にしか表示されていません。サイズ変更イベントを作成する必要があることはわかっていますが、その方法や場所がわかりません。どんな助けでも大歓迎です！私はJSの知識がほとんどないことに注意してください！

テスト サイトへのリンク: GOOGLE MAP ボタンをクリックして、手元の問題を確認してください:

http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

私の Google API スクリプト:

<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(39.739318, -89.266507),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    }  
</script>

マップを含む div:

<div id="myModal" class="reveal-modal large">
    <h2>How to get here</h2>
    <div id="map_canvas" style="width:600px; height:300px;"></div>
    <a class="close-reveal-modal">&#215;</a>
</div>

ボタンのクリック時にマップを呼び出すスクリプト:

<script type="text/javascript">
    $(document).ready(function() {
        $('#myModal1').click(function() {
            $('#myModal').reveal();
        });
    });
</script>
4

5 に答える 5

2

次の2つのソリューションが私のために働いた

function initialize() {
   var mapOptions = {
    center: new google.maps.LatLng(39.739318, -89.266507),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  return map;
}

<div id="myModal" class="reveal-modal" data-reveal>
  <div id="map_canvas" style="height: 300px"></div>
  <a class="close-reveal-modal">&#215;</a>
</div>


$(document).ready(function() {
  var myMap;
  $('#myModal').bind('open', function() {
    if(!myMap) {
      var myMap = initialize();
      setTimeout(function() {
        google.maps.event.trigger(myMap, 'resize');
      }, 300);                  
    }
  });
}

また

$(document).ready(function() {
  var myMap;
  $('#myModal').bind('opened', function() {
    if(!myMap) {
      var myMap = initialize();
      google.maps.event.addDomListener(window, 'load', initialize);
    }
  });
});
于 2014-01-09T10:52:48.427 に答える
1

を削除width: 600px;し、モーダルを開いた後に<div id="map_canvas">サイズ変更をトリガーすると、次のようになります。map

$(".reveal-modal").on("reveal:opened", function(e) {
  google.maps.event.trigger(map, 'resize')
});
于 2013-01-25T12:54:39.950 に答える
1

まず、リンク先のソースに基づいて、ボタンのクリック時にマップを呼び出すスクリプトは、jQuery が読み込まれる前にページにあるため、エラーをスローするだけです。エラーコンソールで確認できます。残りのスクリプトの後にページの下部に移動する必要があります。

data-reveal-idメニュー項目で属性を使用しており、リビール スクリプトが自動的に接続するため、リビールは「機能」しています。

悪い習慣であるオンロードのマップを作成しています。必要になるまで作成しないでください。

あなたの問題を解決するために、これが私がしたことです。メニュー項目から を削除data-reveal-idして ID に置き換えるか、他のセレクターを使用してアクセスすることができます。id="myModal1"それがあなたのイベントコードにすでにあったので、私はそれをに変更しました。

ボタンのクリック時にマップを呼び出すスクリプトを一番下に移動し、次のように変更します。

$(document).ready(function() {
var map;
$('#myModal1').click(function() {
    if(!map){
        var mapOptions = {
          center: new google.maps.LatLng(39.739318, -89.266507),
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP

        };
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);          
    }

    $('#myModal').reveal();
});

});

これにより、ユーザーがリンクをクリックして表示したときにのみマップが作成され、一度だけ作成されます。それはあなたのためにそれを修正するはずです。必要に応じて、開いているコールバックを呼び出しに渡し、reveal()そこでサイズ変更をトリガーできますが、私の限られたテストでは必要ありませんでした。

初期化関数全体を取り除くこともできます。

バンドエイドを取りに行って、その頭に氷を当ててください。

于 2012-10-25T05:04:06.013 に答える
0

これを試して

<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(39.739318, -89.266507),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    }
    $( document ).bind( "pageshow", function( event, data ){
        google.maps.event.trigger(map, 'resize');               
    }); 
</script>
于 2012-10-25T03:05:12.093 に答える