Динамическая смена ширины iframe в зависимости от VW

С помощью js добился подгонки iframe по ширине экрана. Теперь вопрос следующий:можно ли адаптировать мои "костыли" чтобы при смене размера viewport (условно .on resize) подставлять новую переменную в ширину фрейма? Пример кода ниже. P.S. я совсем начинающий))

    <script type="text/javascript">
var myWidth=document.documentElement.clientWidth;
var mapsWidth=myWidth-50;
</script>
<div class="co-center" style="overflow:hidden;width: 90vw;position: relative;">
  <script>document.write('<iframe  width="'+ mapsWidth +'" height="440" src="https://maps.google.com/maps?width=1200&amp;height=440&amp;hl=en&amp;q=%D0%9A%D0%B8%D0%B5%D0%B2%20Obolonska%20Naberezhna%20St+(%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)&amp;ie=UTF8&amp;t=&amp;z=13&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0">');</script>
  </iframe>
  <div style="position: absolute;width: 80%;bottom: 10px;left: 0;right: 0;margin-left: auto;margin-right: auto;color: #000;text-align: center;">
  </div>
  <style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
</div>

С картинкой на весь экран помогло такое решение(см. ниже) но я где-то прочитал что метод document.write работает только при загрузке страницы. Подскажите, пожалуйста, есть ли какие-то варианты?

<script type="text/javascript">
 document.getElementsByTagName("body")[0].onresize = function() {SlideControl()};   
 function SlideControl(){
  var new_height =document.documentElement.clientHeight-document.getElementById('header').offsetHeight;
  document.getElementById('banner_img').style.height = new_height + 'px';
 }
 var new_height =document.documentElement.clientHeight-document.getElementById('header').offsetHeight;
 document.getElementById('banner_img').style.height = new_height + 'px';
</script>