谷歌地图显示在桌面上，但不在移动设备上

Question

我正在使用谷歌地图制作JQM页面。我在http://ho.bl.ee

上传了我的项目

它适用于PC浏览器，但是当我使用移动浏览器访问我的网站时。谷歌地图没有显示，我得到的只是灰色框。

我附上了与谷歌地图有关的部分代码

var loc; //current location
var gmarker;
//for toolbar showing
$(document).ready(function () {

    $("[data-role='header']").toolbar();
    navigator.geolocation.getCurrentPosition(function (position) {
        loc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    }, function () {});

});

//for googlemap
$(document).on('pageshow', function () {
    if (navigator.geolocation == undefined) {
        alert(" 위치 정보를 이용할 수 없습니다. ");
        return;
    }
    //  지도를 보여줄 div 참조객체 얻어오기 
    var myMap = document.getElementById("myMap");
    //  div 에 구글맵 보이기
    var gmap = new google.maps.Map(
    myMap, //지도가 보여질 div
    {
        zoom: 16, //    지도 확대 정보
        center: loc, // 지도 중앙   위치
        mapTypeId: google.maps.MapTypeId.ROADMAP // 지도타입
    });
    //  위치에 마커 표시하기
    gmarker = new google.maps.Marker({
        position: loc,
        map: gmap,
        title: "모임 위치",
        draggable: true,
        animation: google.maps.Animation.DROP
    });
    google.maps.event.addListener(gmarker, 'click', toggleBounce);
    google.maps.event.addListener(gmarker, 'mouseup', showMarkLocation);
});

function showMarkLocation() {
    var markerlatlng = new google.maps.LatLng(gmarker.getPosition().lat(), gmarker.getPosition().lng());

    //지오코더 사용 주소로 변환
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'latLng': markerlatlng
    }, function (results, status)

    {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                $("#markLocation").html(results[0].formatted_address);
            }
        } else {
            alert("Geocoder failed due to: " + status);
        }
    });
    //위도 경도
    console.log(gmarker.getPosition().lat() + "," + gmarker.getPosition().lng());
}


//마커 animation
function toggleBounce() {

    if (gmarker.getAnimation() != null) {
        gmarker.setAnimation(null);
    } else {
        gmarker.setAnimation(google.maps.Animation.BOUNCE);
    }
}

<!--map dialog-->
<div id="mapdialog" data-role="page" data-dialog="true">
  <div data-role="header">
    <h1></h1>
    <a href="#" data-icon="arrow-l" data-rel="back">위치 저장</a>
  </div>
  <div data-role="content">
    <div id="myMap" style="width:100%;height: 400px;margin: auto"></div>
    <div id="markLocation"></div>
</div>
<!--map dialog end-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>