I have this javascript that can place a map on an html page as following:
simple.html:
<body onload="loadMap({{% coordinates %}})">
<div id="map"></div>
</body>
js:
function setupMap(coordinates){
var map = new L.Map('map', {
zoomControl: false,
center: [40, 0],
zoom: 3
});
var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'OSM'
}).addTo(map);
map.addLayer(layer)
}
function loadMap(coordinates) {
window.onload = setupMap(coordinates);
}
My question is whether I can use this function to set the map on a div, instead of the body. If it's not possible, what should I change in order to target a div, not the window?
In my case I want to open the map when a button is clicked and the modal where I want to place the map is poped up.
desired.html:
<button id="modal-map-open" class='modal-toggle' onclick="loadMap({{coordinates}})"><i class="fa fa-map"></i></button>
<div id="open-map-class" class='modal' style="width: 1000px;">
<div id="map"></div>
<button id="modal-map" onclick="closeMap()" class='modal-toggle modal-button'>×</button>
</div>