Javascript phonegap中的谷歌地图问题？

我正在尝试显示各个纬度的地图视图，我从以下链接获得了一些参考，。点击导航栏按钮，我需要在下一页显示地图。我的代码如下：

    $('div[data-role="navbar"] ul li a#Points').on('click', function () {
                showMap();
    });

    function showMap()
    { 
        $.mobile.changePage('#showMapPage', "slide", false, true);  
    }

         $(document).on("pageshow","#showMapPage",function(event){
             alert("test");

             var mapOptions = {
                        center: new google.maps.LatLng(43.069452, -89.411373),
                        zoom: 11,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
         });

我的HTML页面：

<div data-role="page" id="showMapPage">
             <div  data-role="header" data-theme="a">
                 <h4><div id="profileName">Clothing</div></h4>
                   <a href="#" data-role="button" data-theme="a" data-rel="back" data-icon="arrow-l">Back</a>
             </div>
             <div data-role="content">
             <div id="map"></div>
             </div>    
        </div>

服装

我得到以下错误