How to let Jquery Mobile - Google map to show only when button is clicked

Question

I saw this script here and it perfectly fit my need, I am building a Jquery mobile site and what i want is to make the map show only when a button is click

i am finding it difficult getting to work.

 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);
        });

I wrapped it in a click event and when i click nothing happens, the browser console report -- Uncaught TypeError: Object #map-button has no method 'click'

('#map-button').click(function(){

 // Code for map goes here

 });

The HTML

<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>

I only want the map to show after the button is clicked. Any help will be greatly appreciated.

Replace `.live` with `.on` as of jquery 1.7 and later. Don't wrap your code with `.ready()`, it shouldn't be used in JQM. — Omar, Sep 17 '13 at 20:03
@Omar I changed it to .on and removed the .ready() function but it is still not working — David Addoteye, Sep 17 '13 at 20:58
@Omar, yeah the map work if i use it without firing it with click event. — David Addoteye, Sep 17 '13 at 21:51
ok then try adding `display: none;` to div #map_canvas. and use `$('#button_id').on('click', function () ( $('#map_canvas').show();`. — Omar, Sep 17 '13 at 21:54

score 1 · Answer 1 · edited Sep 17 '13 at 20:51

1

You are missing a "$"

$('#map-button').click(function(){

// Code for map goes here

});

That should help with the click event.

As Omar mentioned above on current versions of Jquery .on is used in place of .live

$(document).on("pagebeforeshow", "#detailPage", function() {
  // find current position and on success initialize map and calculate the route
  navigator.geolocation.getCurrentPosition(locSuccess, locError);
});

edited Sep 17 '13 at 20:51

Omar

32,302
9
69
112

answered Sep 17 '13 at 19:20

Trevor

16,080
9
52
83

Thank you, i added the $ sign and also wrapped the code document ready. Now when i click it says -- Object [object Object] has no method 'live' – David Addoteye Sep 17 '13 at 19:31
1

Omar, I was not aware of that. But i'll definitely look into it. Found this link to be helpful http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events – Trevor Sep 17 '13 at 20:11
I changed it from .live to .on and removed the .ready(). It is still not working. – David Addoteye Sep 17 '13 at 20:57
What error message are you getting? Is the map-button click event still getting called? – Trevor Sep 17 '13 at 21:54
@DavidAddoteye please mark this answer as accepted if it answered your question, otherwise give feedback on what is not resolved. Thanks – Trevor Nov 07 '13 at 17:54

How to let Jquery Mobile - Google map to show only when button is clicked

1 Answers1