在phonegap中使用Google地图问题？

Question

我正在尝试显示各个lat long的地图视图，我从以下链接http://flippinawesome.org/2013/12/09/mobile-friendly-mapping-for-phonegap-apps/获得了一些参考。点击导航栏按钮后，我需要在下一页显示地图。我的代码如下，

    $('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>

我收到以下错误，