Question

http://rickgutierrez.bol.ucla.edu/map_mobile6.htm

I am working on a mobile map using google maps API and JQuery Mobile v1.2. I stored spatial data (the bikeway polyline layer and the bike rack point layer) in google fusion tables and displayed them on the map. I would like to toggle each layer on/off using the bike and park anchors in the JQuery navbar. I have exeperience toggling layers on/off with checkboxes on desktop maps but prefer the look and size of the navbar toggling for the mobile map.

My ideal functionality would be for the map to load with the bike layer on and the bike portion of the navbar darker to denote that it is selected, just like on other web apps. A user can use the map to find safer biking routes with bike layer then turn on the bike parking layer at their destination to find a place to lock their bike. Each layer can be toggled on and off independently.

I tried pasting the code in here but it was a mess. Please look review my source code at the above link. I am a novice at coding and would appreciate any help. Thanks in advance.

Update: I guess someone commented that if geolocation is denied the map does not work. here is the geolocation code:

// allow iPhone or Android to track movement
        if ( useragent.indexOf('iPhone') !== -1 || useragent.indexOf('Android') !== -1 ) {
            navigator.geolocation.watchPosition( 
                displayLocation, 
                handleError, 
                { 
                    enableHighAccuracy: true, 
                    maximumAge: 30000, 
                    timeout: 27000 
                }
            );          

        // or let other geolocation capable browsers to get their static position
        } else if ( navigator.geolocation ) {
            navigator.geolocation.getCurrentPosition( displayLocation, handleError );
        }

How do I fix that? I am guessing that I need to put some backup coordinates into the else statement?

Answer 1

Add a google.maps.event.addDomListener listening for a click event to the elements that you want to perform the toggle. In the function associated with that listener add your code to toggle the layer.

I would suggest:

if (layer.getMap() == null) layer.setMap(map); else layer.setMap(null);

where “map” is a reference to your google.maps.Map object.

Working example