Question

Why there is a difference in locations when using jquery mobile maps api compared to google maps.

Here are the images showing the difference

Locations as in google map

Locations when using jquery ui maps api

Here are the lat longs i am testing with

+39° 44′ 41.22″, -104° 49′ 54.15″

+39° 44′ 39.28″, -104° 50′ 5.86″

There are other lat longs where i am getting the difference.

The JS library i am using – http://maps.googleapis.com/maps/api/js?sensor=true&libraries=geometry

Demo Code

How to solve this?

Pointers?

Answer 1

The API has problems with geocoding strings representing coordinates, which I think is because the reverse-geocoder gets involved. Since you have the coordinates, you can use those to create LatLng objects directly, which seems to work.

{ 'origin': new google.maps.LatLng(39.744783, -104.831709), 
  'destination': new google.maps.LatLng(39.744244, -104.834960), 
  'travelMode': google.maps.DirectionsTravelMode.WALKING }

Using those co-ordinates gets closer to the stated destination than Google Maps does, but (because it’s closer) it uses a different route to get there.

http://jsfiddle.net/zqtJJ/

If you want the route to use E 17th Place to get to that building, you’ll need to specify the destination as being a little closer to the street than the footpath.