从手机查看我的web应用时，Javascript Google map api没有响应

下面是我创建谷歌地图的代码，当我从桌面查看时，它们工作正常，但当我调整浏览器大小或使用手机时，我无法缩放、单击事件或地图上的任何内容，在这种情况下，它们就像图像一样。我不知道可能是什么问题。我在单击事件上尝试了touchstart，但没有任何更改。有什么想法吗

  <div class="col-md-5 col-xs-12" id="map" style="width:100%;height:600px;"></div>

  function mymodal(thismodal){
      $(thismodal).modal('show');
    }
          function initMap() {
            var myLatLng = {lat: 40.69951725159461, lng: 24.64619453476564};


           var locations = [
          ['Skala Rachoniou',40.782232, 24.614488, 1],
          ['Ormos Prinou', 40.7584839,24.5613919  , 2],
          ['Skala Kallirachis', 40.7067027,24.5288304, 3],
          ['limenaria', 40.627805,24.568963, 4],
          ['Pefkari', 40.61778,24.5892925, 5],
          ['Potos', 40.6108026,24.606527, 6],
          ['Giola', 40.5944829,24.6648514, 7],
          ['Moni Archaggelou', 40.5971617,24.6994095, 8] ,
          ['Thymonia Beach', 40.602884,24.7176294, 9],
          ['Aliki', 40.605479,24.7394179, 10],
          ['Agios Ioannis Beach', 40.6180698,24.7612051, 11],
          ['Makriammos Theologou', 40.6548492,24.7565726, 12],
          ['Loutra', 40.654139,24.7553921, 13],
          ['Kinira', 40.6649342,24.760148, 14],
          ['Chrisi Akti', 40.7103487,24.7519925, 15],
          ['Chrisi Ammoudia', 40.7314367,24.7576794, 16],
          ];
          var marker = [];



            var image='http://icons.iconarchive.com/icons/pan-tera/flags/32/Greece-Flag-icon.png';
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 5,
              center: myLatLng
            });

            var map1 =new google.maps.Map(document.getElementById('zoomed'), {
              zoom: 11,
              center: myLatLng
            });

            for ( var i = 0; i < locations.length; i++) {  
          marker[i] = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map1,
            icon:image,


          });
    var selector = "#myModal"+   i;


     }  google.maps.event.addListener(marker[0], 'click', function() {
        $("#myModal0").modal('show');
    });
    google.maps.event.addListener(marker[1], 'click', function() {
         $("#myModal1").modal('show');
    });

    google.maps.event.addListener(marker[2], 'click', function() {
         $("#myModal2").modal('show');
    });

    google.maps.event.addListener(marker[3], 'click', function() {
         $("#myModal3").modal('show');
    });

    google.maps.event.addListener(marker[4], 'click', function() {
         $("#myModal4").modal('show');
    });

    google.maps.event.addListener(marker[5], 'click', function() {
         $("#myModal5").modal('show');
    });

    google.maps.event.addListener(marker[6], 'click', function() {
         $("#myModal6").modal('show');
    });
    google.maps.event.addListener(marker[7], 'click', function() {
         $("#myModal7").modal('show');
    });

    google.maps.event.addListener(marker[8], 'click', function() {
         $("#myModal8").modal('show');
    });

    google.maps.event.addListener(marker[9], 'click', function() {
         $("#myModal9").modal('show');
    });

    google.maps.event.addListener(marker[10], 'click', function() {
         $("#myModal10").modal('show');
    });

    google.maps.event.addListener(marker[11], 'click', function() {
         $("#myModal11").modal('show');
    });

    google.maps.event.addListener(marker[12], 'click', function() {
         $("#myModal12").modal('show');
    });

    google.maps.event.addListener(marker[13], 'click', function() {
         $("#myModal13").modal('show');
    });
    google.maps.event.addListener(marker[14], 'click', function() {
         $("#myModal14").modal('show');
    });
    google.maps.event.addListener(marker[15], 'click', function() {
         $("#myModal15").modal('show');
    });


            var marker1 = new google.maps.Marker({
              position: myLatLng,
              map: map,
              title: 'Zoomed map'
            });


          }
        </script>

函数mymodal（thismodal）{
$（thismodal.modal（'show'）；
}
函数initMap（）{
var Mylatng={lat:40.6995172559461，lng:24.64619453476564}；
变量位置=[
[Skala Rachoniou'，40.782232,24.614488,1]，
[Ormos Prinou'，40.7584839,24.5613919,2]，
[Skala Kallirachis'，40.7067027,24.5288304,3]，
[limenaria'，40.627805,24.568963,4]，
[Pefkari'，40.61778,24.58925,5]，
[Potos'，40.6108026,24.606527,6]，
[Giola'，40.5944829,24.6648514,7]，
[Moni Archaggelou'，40.5971617,24.6994095,8]，
[Thymonia Beach'，40.602884,24.7176294,9]，
[Aliki'，40.605479,24.7394179,10]，
['Agios Ioannis Beach'，40.6180698,24.7612051,11]，
[Makriammos Theologyou'，40.6548492,24.7565726,12]，
[Loutra'，40.654139,24.7553921,13]，
[Kinira'，40.6649342,24.760148,14]，
[Chrisi Akti'，40.7103487,24.7519925,15]，
[Chrisi Ammoudia'，40.7314367,24.7576794,16]，
];
var标记=[]；
var图像处理http://icons.iconarchive.com/icons/pan-tera/flags/32/Greece-Flag-icon.png';
var map=new google.maps.map（document.getElementById（'map'）{
缩放：5，
中心：myLatLng
});
var map1=new google.maps.Map（document.getElementById（'zoomed'）{
缩放：11，
中心：myLatLng
});
对于（var i=0；i

您确定map div顶部没有其他HTML元素吗？它可能是肉眼看不见的东西。欢迎来到堆栈溢出。我不知道你在问什么，或者你希望我们如何解决这个问题。你可以阅读一些关于如何帮助我们帮助你的指南。你确定map div上面没有其他HTML元素吗？它可能是肉眼看不见的东西。欢迎来到堆栈溢出。我不知道你在问什么，或者你希望我们如何解决这个问题。你可以阅读一些关于如何帮助我们帮助你的指导