2

Googleマップを使用した道順のきれいな例として、あなたが作成した例を使用しようとしていました. 私が使用していたコードは次のとおりです。

<!doctype html>
<html lang="en">
<head>
    <title>jQuery mobile with Google maps</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link href="../themes/theme1.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
    <script type="text/javascript">

        var map,
            currentPosition,
            directionsDisplay, 
            directionsService;

        function initialize(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: 15,
               center: currentPosition,
               mapTypeId: google.maps.MapTypeId.ROADMAP
             });

            directionsDisplay.setMap(map);

             var currentPositionMarker = new google.maps.Marker({
                position: currentPosition,
                map: map,
                title: "Current position"
            });

            var infowindow = new google.maps.InfoWindow();
            google.maps.event.addListener(currentPositionMarker, 'click', function() {
                infowindow.setContent("Current position: latitude: " + lat +" longitude: "   + lon);
                infowindow.open(map, currentPositionMarker);
            });
        }

        function locError(error) {
            // initialize map with a static predefined latitude, longitude
           initialize(59.3426606750, 18.0736160278);
        }

        function locSuccess(position) {
            initialize(position.coords.latitude, position.coords.longitude);
        }

        function calculateRoute() {
            var targetDestination = $("#target-dest").val();
            if (currentPosition && currentPosition != '' && targetDestination && 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", "#map_page", function() {
            navigator.geolocation.getCurrentPosition(locSuccess, locError);
        });

        $(document).on('click', '#directions-button', function(e){
            e.preventDefault();
            calculateRoute();
        });

    </script>
</head>
<body>
    <div id="basic-map" data-role="page" data-theme="d">
        <div data-role="header" data-theme="d">
            <h1>Directions</h1>
            <a href="#page4" class="ui-btn-left" data-icon="back" data-iconpos="notext" data-direction="reverse">Events</a> 
        </div>
        <div data-role="content" data-theme="d">   
            <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <div id="map_canvas" style="height:350px;"></div>
            </div>
            <div data-role="fieldcontain" data-theme="d">
                <input type="text" name="target-dest" id="target-dest" value="13002 Rivers Bend Road, Chester, VA"  />
            </div>
            <a href="#" id="directions-button" data-role="button" data-inline="true" data-mini="true">Get Directions</a>
            <div id="results" style="display:none;">
                <div id="directions"></div>
            </div>
        </div>
    </div>      
</body>
</html>

通常のブラウザで美しく動作します。ただし、AndroidまたはiOSアプリ内に表示しようとすると、地図のない灰色のボックスが表示され、道順をクリックしても何もしません。私が間違っていることを知っていますか。

4

2 に答える 2