Show maps with multiple markers in a reveal modal(foundation) - modal-dialog

Question

I've create a map with multiple markes.
Now I'd like to show it in a reveal modal (foundation 6), can someone help me?
I would like to display the google map in a modal reveal, to be visible only when I click on "Open google map".
It seems that what I did does not work properly and I do not understand why.
Look here: 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">×</a>
</div>
<div>Click Me For A Modal</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",
"[phone]"
],
];
];
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>

Answer 1

in first place you must change the id of modal container, this should be the same that data-reveal-id on the link (now one is "MyModal" and the other is "map").
Open google map
<div id="myModal" class="reveal-modal">
In your jsfiddle file it seems not loading foundation.css, foundation.js, foundation.reveal.js and jquery, these are necessary as indicated on Reveal Modal Foundation docs (Using the Javascript section)
You can check a updated working version here: http://jsfiddle.net/x6nqL3po/1488/