Проблема с картой Google в phonegap?

#javascript #android #google-maps #cordova #google-maps-api-3

#javascript #Android #google-карты #кордова #google-maps-api-3

Вопрос:

Я пытаюсь отобразить вид карты для соответствующих широт, я получил некоторую ссылку по следующей ссылке,http://flippinawesome.org/2013/12/09/mobile-friendly-mapping-for-phonegap-apps /. При нажатии кнопки navbar мне нужно отобразить карту на следующей странице. Мой код выглядит следующим образом,

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

Я получаю следующую ошибку,

введите описание изображения здесь