I am currently working on implementing a Javascript component that displays pinned locations and related information on a map. I have made some progress with the implementation, but unfortunately, it does not appear correctly in the actual site. There is a specific radio button in that section where, if the value matches 'location', a modal class is displayed.
<div class="basket_totals_radios_float">
<div class="row" style="padding: 1rem">
<div class="col-xs-12">
<input type="radio" name="basket_choose_delivery_type" id="basket_choose_delivery_type" value="location" class="template_fl delivery_radio_button" />
<label for="" style="font-size: 16px;font-family: ProximaNovaSemiBold; text-transform: uppercase;">locations</label>
<br>
<p>show locations..</p>
</div>
</div>
</div>
The sample code provided works here, but it faces issues when implemented on the actual site;
window.easyPackAsyncInit = function() {
easyPack.init({
defaultLocale: 'uk',
instance: 'uk',
filters: true,
apiEndpoint: 'https://api-uk-points.easypack24.net/v1',
closeTooltip: false,
points: {
types: ['parcel_locker']
},
map: {
initialTypes: ['parcel_locker'],
defaultLocation: [54.2578673, -6.8223541]
}
});
var map = easyPack.mapWidget('easypack-map', function(point) {
alert(point.name);
});
};
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
} .modal {
display: none;
position: fixed;
z-index: 99999;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<link href="https://geowidget.easypack24.net/uk/js/easypack.css" rel="stylesheet"/>
<script src="https://geowidget.easypack24.net/uk/js/sdk-for-javascript.js"></script>
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Locations</p>
<div id='easypack-map'></div>
</div>
</div>Do you have any suggestions on how to resolve this issue?
Thank you for your assistance.