hide Google Map element and display offline map image SAME place and vice versa

Question

I am an macOS developer and am learning Javascript for the coding of Fitbit Ionic watch. I've tried an online/offline map app test. It works when online map and offline IMAGE map are displayed side by side in html.

<table border="0" cellpadding="0" cellspacing="0">
<td>
    <div id="mymap" style="width: 348px; height: 250px;  position: relative; overflow: hidden;"></div>
</td>
<td>
    <div style="width: 348px; height: 250px; position: relative; overflow: hidden;"> 
    <img id="partImage" alt="" style="transform:scale(0.5); position: absolute" />
    </div>           
</td>
</table>

<script type="text/javascript">
    //...
    function OfflineIt(){
        //...   
        //grab statics map image and processing
        //saved map image is 1280x1280 in size
        //...
        document.getElementById('mymap').style.visibility ='hidden';
        document.getElementById('partImage').style.visibility ='visible';
        //...
    }
</script>

The second div is 348x250 and display part of my 1280x1280 offline map correctly as the first div did. The hidden of online map is working too. But, when I tried to remove the second div and move my img into the first div, my offline image window will display in full size 1280x1280 instead of the requested 348x250.

<td>
    <div id="mymap" style="width: 348px; height: 250px;  position: relative; overflow: hidden;">
    <img id="partImage" alt="" style="transform:scale(0.5); position: absolute" />
</div>
</td>

How may I replace the online map div with my offline image div and display the image correctly?

Answer 1

This answered my question: How to show or hide an element: display & visibility

Hope it is helpful to others, thanks!

my final code is:

document.getElementById('mymap').style.display ='none';
document.getElementById('partImage').style.display ='block';

...

<td>
        <div id="mymap" style="width: 348px; height: 250px; "></div>
        <div id="myimage" style="width: 348px; height: 250px; position: relative; overflow: hidden;"> 
        <img id="partImage" alt="" style="transform:scale(0.5); position: absolute; " />    
        </div>
</td>