如何让Jquery Mobile - Google地图仅在单击按钮时显示

>我在这里看到了这个脚本，它完全符合我的需求，我正在构建一个 Jquery 移动网站，我想要的是让地图仅在单击按钮时显示

我发现上班很困难。

 var map,
            currentPosition,
            directionsDisplay, 
            directionsService,
            destinationLatitude = latt,
            destinationLongitude = lonn;
        function initializeMapAndCalculateRoute(lat, lon)
        {
            directionsDisplay = new google.maps.DirectionsRenderer(); 
            directionsService = new google.maps.DirectionsService();
            currentPosition = new google.maps.LatLng(lat, lon);
            map = new google.maps.Map(document.getElementById('map_canvas'), {
               zoom: 25,
               center: currentPosition,
               mapTypeId: google.maps.MapTypeId.ROADMAP
             });
            directionsDisplay.setMap(map);
             var currentPositionMarker = new google.maps.Marker({
                position: currentPosition,
                map: map,
                title: "Current position"
            });

            // calculate Route
            calculateRoute();
        }
        function locError(error) {
           // the current position could not be located
        }
        function locSuccess(position) {
            // initialize map with current position and calculate the route
            initializeMapAndCalculateRoute(position.coords.latitude, position.coords.longitude);
        }
        function calculateRoute() {
            var targetDestination =  new google.maps.LatLng(destinationLatitude, destinationLongitude);
            if (currentPosition != '' && targetDestination != '') {
                var request = {
                    origin: currentPosition, 
                    destination: targetDestination,
                    travelMode: google.maps.DirectionsTravelMode["DRIVING"]
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setPanel(document.getElementById("directions"));
                        directionsDisplay.setDirections(response); 
                        /*
                            var myRoute = response.routes[0].legs[0];
                            for (var i = 0; i < myRoute.steps.length; i++) {
                                alert(myRoute.steps[i].instructions);
                            }
                        */
                        $("#results").show();
                    }
                    else {
                        $("#results").hide();
                    }
                });
            }
            else {
                $("#results").hide();
            }
        }
      $(document).live("pagebeforeshow", "#detailPage", function() {
            // find current position and on success initialize map and calculate the route
            navigator.geolocation.getCurrentPosition(locSuccess, locError);
        });

我把它包装在一个点击事件中，当我点击时什么也没发生，浏览器控制台报告 -- 未捕获的类型错误：对象 #map 按钮没有方法"单击"

('#map-button').click(function(){
 // Code for map goes here
 });

该目录

<div data-role="page" id="detailPage">
<div data-role="header">
<h1>Detail Page</h1>
</div>
<div data-role="content">
<div id="itemDetails"></div>
 <button id="map-button">Get Direction</button>
 </div>
  <div id="map_canvas" style="height:300px; width:100%"></div>
   <div id="results" style="display:none;">
     <div id="directions"></div>
   </div>
   <div data-role="footer">
    <h4>Footer</h4>
    </div>
  </div>

我只希望在单击按钮后显示地图。任何帮助将不胜感激。