CODEWITHSUNDEEP
javascripthtmlgeolocationbing-maps
medialounge
medialounge

Reputation: 11

Bing maps api works on pc but not mobile web app

I really hope someone can help with my problem. I have built a mobile web app http://ufa-ld-qa.azurewebsites.net/ (the QA site) with asp.net mvc4 using Bing Maps API for various functionality in the app. I am having problems with the directions module. When I view the site on my pc (Chrome and IE) it works fine and I see no errors but on mobile devices it is not working (but it did work fine yesterday when we launched to QA). I have used HTML5 geolocation (this may be the issue) to get user's location to allow them to get directions to a location. I will post my code below and if anyone could please help me it would be greatly appreciated. We have tested it on about 7 different mobile devices with different OS's and it doesn't work on any. Does anyone know if this is a Bing issue or my code below? Thanks so much in advance.

<script type="text/javascript">
    var map = null;
    var directionsManager = null;
    var userLat = null;
    var userLong = null;
    var userPosition = null;
    var latlng = new Microsoft.Maps.Location(@Model.latitude, @Model.longitude);
    navigator.geolocation.getCurrentPosition(locationHandler);

    function locationHandler(position)
    {

        userPosition = new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude);
    }  
    function GetMap() {

        // Initialize the map
        map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: "Au_7giL-8dUbFkJ8zLjcQKy4dV2ftPfpMxQ0_sVBksoj4Y-1nBT00Z1oqUIU894_",
            mapTypeId: Microsoft.Maps.MapTypeId.road});
        Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: directionsModuleLoaded });


    }
        function directionsModuleLoaded() {
            // Initialize the DirectionsManager
            directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);

            // Create start and end waypoints
            var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ location: userPosition });
            var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ location: latlng });

            directionsManager.addWaypoint(startWaypoint);
            directionsManager.addWaypoint(endWaypoint);


            // Set request options
            directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });

            // Set the render options
            directionsManager.setRenderOptions({ 
                itineraryContainer: document.getElementById('directionPanel'), 
                displayWalkingWarning: false, 
                walkingPolylineOptions: { strokeColor: new Microsoft.Maps.Color(200, 0, 255, 0) },
                });


            // Specify a handler for when an error occurs
            Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', displayError);

            // Calculate directions, which displays a route on the map
            directionsManager.calculateDirections();



        } 

        function displayError(e) {
            // Display the error message
            alert(e.message);


        }




      </script>

Upvotes: 1

Views: 1079

Answers (2)

rbrundritt
rbrundritt

Reputation: 17954

A couple of things to try. First ensure that your app is allowed to access the users location. Most mobile platforms require you to mark that the app requires access to the GPS in the manifest. Another thing to look into is the possibility that the userLocation isn't populated before your callback for the directions manager is called. It's possible that the GPS takes a little longer on the mobile device to find the users location and as such the directions loaded function is firing before the users location is set, thus passing in a null starting . You might find it useful to have a flag to indicate that the directions manager has loaded and a simple function that runs after setting the flag and also runs after setting the use location that checks that both the directions manager has loaded and the user location has been set and then calls your directions loaded function.

Upvotes: 1

larrymol
larrymol

Reputation: 101

My Windows Phone 8 App is experiencing similar behavior. (Nokia 920)

http://bing.com/maps/default.aspx?cp=47.677797~-122.122013&lvl=12

When the Website preference is set to 'desktop version' the map renders correctly.

When the Website preference is set to 'mobile version' the map renders incorrectly.

Just started happening about a week ago !

Upvotes: 0

Related Questions