1

私はこれに関連する数十の異なるトピックを見てきましたが、私の人生では、それらのどれも機能させることができません. 私は現在、1 つの Google マップと 4 つのマーカーを持つ単一ページの Web サイトを持っています。マップの下には、これらのマーカーのそれぞれに、連絡先/住所などの情報とリンクを含む小さな html セクションがあります。このリンクをクリックすると、モーダル ウィンドウ (foundation 3) が開き、拡大された Google マップと 1 つの場所だけが表示されます。

これらのモーダル ウィンドウに表示されるマップは、マップの 3/4 を灰色のブロックとして表示しているだけです。

HTML:

<a href="#map1" id="modal1-button" data-reveal-id="myModal1" title="location details" class="red-arrow">visit location</a>

    <div id="myModal1" class="reveal-modal large">
      <div id="map-modal1" style="width:100%;height:500px;"></div>
    </div>

Javascript:

<script type="text/javascript">

var markers = [
     ['Location1', 53.479468, -2.246873, 1],
     ['Location2', 53.483558, -2.239243, 4],
     ['Location3', 53.482900, -2.243132, 5],
     ['Location4', 53.481489, -2.244967, 3];

var map2;

function initializeMaps() {
    var myOptions = {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };

    var optionsMap1 = {
        zoom: 14,
        center: new google.maps.LatLng(53.480487, -2.241776),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };

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

    var image = 'img/wings_icon.png';
    var image2 = 'img/wings_icon_main.png';

    var infowindow = new google.maps.InfoWindow(); 
    var marker, i;
    var bounds = new google.maps.LatLngBounds();

    var map2LatLng = new google.maps.LatLng(53.483558, -2.239243);
    var map2Marker = new google.maps.Marker({
          position: map2LatLng,
          map: map2,
          icon: image,
          title: 'Wings Manchester Arndale'
    });

    //Main Map Markers Loop
    for (i = 0; i < markers.length; i++) { 
        var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(pos);
        if (i === 0){
            marker = new google.maps.Marker({
                position: pos,
                icon: image2,
                map: map
            }); 
        } else {
            marker = new google.maps.Marker({
                position: pos,
                icon: image,
                map: map
            });
        }
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(markers[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
    map.fitBounds(bounds);

}


/*  
jQuery('#myModal1').bind('', function() {
  google.maps.event.trigger(map2, 'resize');
  map2.setCenter(new google.maps.LatLng(53.483558, -2.239243));
});
*/

jQuery(document).ready(function(){
  jQuery("a#more").click(function(){
    jQuery("#show-para").toggle();
  });
  jQuery( "#modal1-button" ).click(function() {
      alert( "Handler for .click() called." );
       google.maps.event.trigger(map2, 'resize');
    });
});

</script>

調査によると、問題は、モーダル ウィンドウにあると div とその中のすべて (マップ) が何も表示されないように設定され、v3 Google マップ API で再び表示されるときに .resize() する必要があるという事実にあります。「google.maps.event.trigger(map2, 'resize');」コンソールに入力すると機能しますが、私の愛のために、ボタンをクリックしてこれをトリガーすることはできません。

4

0 に答える 0