Map popup

shortcode-script.js

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB72d431DELv-7l45MlWBDBJH6XxPieMGU">
</script>

<script>
function initMapHCM() {  

var center = new google.maps.LatLng(10.793270, 106.687616);
var map = new google.maps.Map(document.getElementById('map_hcm'), {
zoom: 16,
center: center
});

var contentString = '<div class="map_content"><img src="/wp-content/uploads/2017/09/map-logo.png"><div style="margin-left: 20px;">44 Tran Quy Khoach</br>Ho Chi Minh, Vietnam</div></div>';

var infowindow = new google.maps.InfoWindow({
content: contentString
});

var marker = new google.maps.Marker({
position: center,
map: map,
title: 'Dcorp HCM'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}

function initMapHN() {  

var center = new google.maps.LatLng(21.0355329,105.8190281);
var map = new google.maps.Map(document.getElementById('map_hn'), {
zoom: 17,
center: center
});

var contentString = '<div class="map_content"><img src="/wp-content/uploads/2017/09/map-logo.png"><div style="margin-left: 20px;">285 Đội Cấn</br>Hà Nội, Vietnam</div></div>';

var infowindow = new google.maps.InfoWindow({
content: contentString
});

var marker = new google.maps.Marker({
position: center,
map: map,
title: 'Dcorp HN'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
</script>
<script type="text/javascript">
var btn = document.getElementsByClassName("btn");
var modal = document.getElementsByClassName("modal");
var modalContent = document.getElementsByClassName("modal-content");
var close = document.getElementsByClassName("close");
var next = document.getElementsByClassName("next");
var prev = document.getElementsByClassName("prev");

for (var i = 0; i < btn.length; i++) {

    btn[i].onclick = (function(i) {
        return function(event) {
        modal[i].style.display = "block";
        if (modalContent[i].offsetHeight > window.innerHeight) {
            modalContent[i].style.top = "50px";
            modalContent[i].style.transform = "translate(0)";                        
        }
        initMapHCM();
        initMapHN();

    }
    })(i);

    close[i].onclick = (function(i) {
        return function() {
        modal[i].style.display = "none";
    }
    })(i);

    modal[i].onclick = (function(i) {
        return function(event) {
            if (event.target == modal[i]) {
                modal[i].style.display = "none";
            }
        }
    })(i);
}
</script>

shortcode.php

<?php
<a id="hcm-map" class="btn">test</a>
  <div class="modal">
      <div class="modal-content">
      <div class="modal-header">
      <div class="close about_close"><!-- × --></div>
      </div>
      <div class="modal-body">
          <div id="map"></div>
      </div>
      </div>
  </div>