在显示模式（基础）中显示具有多个标记的地图答案

【问题标题】：Show maps with multiple markers in a reveal modal(foundation)在显示模式（基础）中显示具有多个标记的地图
【发布时间】：2019-02-21 08:38:21
【问题描述】：

我已经创建了一个带有多个标记的地图。

现在我想在显示模式中展示它（基础 6），有人可以帮我吗？

我想在模态显示中显示谷歌地图，只有当我点击“打开谷歌地图”时才可见。

似乎我所做的工作不正常，我不明白为什么。

看这里：http://jsfiddle.net/x6nqL3po/1388/

<div id="map" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <div id="map"></div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
<div><a href="#" data-reveal-id="myModal">Click Me For A Modal</a></div>

<script>
//Google Maps
    jQuery(function() {
        if ($("#map").length) {
            initMap();
        }
    });

    //initMap
    function initMap() {
       var locations = [
                [
        "Locatie title 1",
        52.147173,
        4.470745,
        "http://cdn.leafletjs.com/leaflet-0.6.4/images/marker-icon.png",
        "city 1",
        "Address 1",
        "+38/(071)/123/45/67"
    ],
    [
        "Locatie title 2",
        52.166245,
        4.51764,
        "https://maps.google.com/mapfiles/ms/micons/blue.png",
        "city 2",
        "",
        "+38/(071)/123/45/67"
    ],
    [
        "Locatie title 4",
        52.126607,
        4.619146,
        "https://maps.google.com/mapfiles/ms/micons/blue.png",
        "",
        "Address 4",
        "+38 (071) 123-45-67"
    ],
];
    ];
        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 9,
            center: new google.maps.LatLng(52.159393,4.673784),

            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var infoWindow = new google.maps.InfoWindow();
        var marker, i;
        for (i = 0; i < locations.length; i++) {
            var lat = locations[i][1];
            var lng = locations[i][2];
            var pin = locations[i][3];
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                animation: google.maps.Animation.DROP,
                icon: pin,
                map: map
            });

            google.maps.event.addListener(marker, "click", (function(marker, i) {
                var title = (locations[i][0] !== undefined) ? locations[i][0] : '';
                var city = (locations[i][4] !== undefined) ? locations[i][4] : '';
                var address = (locations[i][5] !== undefined) ? locations[i][5] : '';
                var html = ( (title !== '') ? "<h5>" + title + "</h5>" : title ) + ( (city !== '') ? "<h6>" + city + "</h6>" : city ) + ( (address !== '') ? "<p>" + address + "</p>" : address ) ;

                return function() {
                    infoWindow.setOptions({
                        content:html
                    });                 
                    infoWindow.open(map, marker);
                };
                //auto center map
                map.setCenter(marker.getPosition());  
            })(marker, i)
        );
        }
    }
        function load() {
            var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(30.0599153,31.2620199,13),
            zoom: 13,
            mapTypeId: 'roadmap'
            });
        }
        </script>

【问题讨论】：

标签： modal-dialog maps zurb-foundation

【解决方案1】：

首先您必须更改模态容器的id，这应该与链接上的data-reveal-id相同（现在一个是“MyModal”，另一个是“map”）。

<a href="#" data-reveal-id="myModal">Open google map</a>
<div id="myModal" class="reveal-modal">

在您的 jsfiddle 文件中，它似乎没有加载 Foundation.css、foundation.js、foundation.reveal.js 和 jquery，这些是必要的，如 Reveal Modal Foundation docs 所示（使用 Javascript 部分）

您可以在此处查看更新的工作版本：http://jsfiddle.net/x6nqL3po/1488/

【讨论】：