Показать карты с несколькими маркерами в режиме показа (фундамент) - PullRequest
Новая
       36

Показать карты с несколькими маркерами в режиме показа (фундамент)

0 голосов
/ 17 сентября 2018

Я создал карту с несколькими марками.

Теперь я хотел бы показать ее в режиме показа (основание 6), кто-нибудь может мне помочь?

Я хотел бы отобразить карту Google в режиме модального показа, которая будет видна только при нажатии на «Открыть карту Google».

Похоже, что я не работал должным образом иЯ не понимаю, почему.

Смотрите здесь: 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>

1 Ответ

0 голосов
/ 27 октября 2018

в первую очередь вы должны изменить id модального контейнера, это должно быть то же самое, что data-reveal-id в ссылке (теперь один - «MyModal», а другой - «карта»). 

<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, это необходимо, как указано в Показать документы модального фонда (Использование раздела Javascript)

Вы можете проверить обновленную рабочую версию здесь: http://jsfiddle.net/x6nqL3po/1488/

...