Question

我已经看过几十个与此相关的不同主题但是因为我的生活无法让他们中的任何一个工作。我目前有一个单页网站，有1个谷歌地图和4个标记。在地图下方，每个标记都有一个小的html部分，其中包含联系人/地址等信息以及链接。此链接打开一个模态窗口（基础3），其中包含放大的谷歌地图，只有单个位置。

这些模态窗口上显示的地图只是将地图的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 maps api时，它需要是.resize（）' d。当“google.maps.event.trigger（map2，'resize'）;”进入它工作的控制台，但为了爱我，我无法点击按钮来触发它。

模态窗口中的多个谷歌地图（灰色框调整大小）

0 个答案: