Here Map stacks in Bootstraps Modal - here-api

Question

I have several modal buttons which on click should show pre-saved Map Route in PolyLine.
Below code I used on php Ajax Modal Call. $jsline, $center_lat, $center_lng are php variable which are determined on modal click by ajax query.
<div id="map" style="width:100%;height:450px"></div>
<script>
$(document).on("shown.bs.modal", function () {
function addPolylineToMap(map) {
var lineString = new H.geo.LineString();
'.$jsline.'
map.addObject(new H.map.Polyline(
lineString, { style: { lineWidth: 4 }}
));
}
var platform = new H.service.Platform({
apikey: myhereapi
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(document.getElementById("map"),
defaultLayers.vector.normal.map,{
center: {lat:'.$center_lat.', lng:'.$center_lng.'},
zoom: 5.65,
pixelRatio: window.devicePixelRatio || 1
});
window.addEventListener("resize", () => map.getViewPort().resize());
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
addPolylineToMap(map);
});
</script>
If I remove on("shown.bs.modal") modal window pops up with blank map (white background, no map). When I use on("shown.bs.modal") modal window pops up and work properly on first click. However, second, third, and further clicks will stack maps. I mean in second click there 2 maps appear. In third click 3 maps appear.
Why maps get stacked ? How to resolve this issue ? As far as I can see no one else faced with similar problem before.

Answer 1

I managed to find solution, so I am sharing it if anyone else faces with such issue.
I have added $("#map").empty(); just before new instance of map is loaded as below.
<div id="map" style="width:100%;height:450px"></div>
<script>
$(document).on("shown.bs.modal", function () {
function addPolylineToMap(map) {
var lineString = new H.geo.LineString();
'.$jsline.'
map.addObject(new H.map.Polyline(
lineString, { style: { lineWidth: 4 }}
));
}
$("#map").empty();
var platform = new H.service.Platform({
apikey: myhereapi
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(document.getElementById("map"),
defaultLayers.vector.normal.map,{
center: {lat:'.$center_lat.', lng:'.$center_lng.'},
zoom: 5.65,
pixelRatio: window.devicePixelRatio || 1
});
window.addEventListener("resize", () => map.getViewPort().resize());
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
addPolylineToMap(map);
});
</script>