Drawing The Shortest Line Between Points In A KML Track On Google Maps

Question

UPDATE: Google fixed this bug on March 6, 2016 https://code.google.com/p/gmaps-api-issues/issues/detail?id=8003&q=apitype%3AJavascript3%20type%3ADefect&sort=-stars&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Internal%20Stars

I cannot display the shortest line between two points when the shortest line crosses the international dateline. There's an illustration of the problem at: http://cars-suck.com/Test (Zooming in and out shows what google is up to.)

A line between San Francisco and Tokyo should cross the Pacific, since that's the shortest path. Instead, google draws a line across North America, the Atlantic, Asia, etc.

What should I change to get the line I want?

Here's the relevant chunk of the .kml file:

<Placemark>
<styleUrl>#multiTrack</styleUrl>
<gx:Track>
    <altitudeMode>clampToGround</altitudeMode>
    <when>2014-09-17T07:25:06.875-07:00</when><gx:coord>-122.4167 37.7833 0</gx:coord>
    <when>2014-09-18T12:06:42.745-07:00</when><gx:coord>139.6833 35.6833 0</gx:coord>
</gx:Track>

Here's the script that displays the map:

    <script>
  function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(21.3114, -179.9999),
      zoom: 2,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      preserveViewport: true,
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var kmlUrl = 'http://cars-suck.com/Test/Assets/gps_history.kml';
    loadKmlLayer(kmlUrl, map);
  }

  function loadKmlLayer(src, map) {
    var kmlLayer = new google.maps.KmlLayer(src, {
      suppressInfoWindows: false,
      preserveViewport: true,
      map: map
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

</script>

The complete .kml file is here: cars-suck.com/Test/Assets/gps_history.kml

I may have lost my mind, but I believe this worked correctly back in January. Perhaps I was relying on something deprecated, or perhaps I simply thought it was working.

Update: I have not lost my mind. Someone has reported a similar problem here: productforums.google.com/forum/#!topic/maps/kQo4IcDRysk

Bug report: https://code.google.com/p/gmaps-api-issues/issues/detail?id=8003&q=apitype%3AJavascript3%20type%3ADefect&sort=-stars&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Internal%20Stars

On stackoverflow: Google Maps mangling KML

No solution yet.

Answer 1

When geometry in Google Earth needs to span across the international dateline, you have you specify the degree coordinates differently to "hint" at the intended orientation. From the Google KML specification:

Specifies the longitude of the west edge of the bounding box, in decimal degrees from 0 to ±180. For overlays that overlap the meridian of 180° longitude, values can extend beyond that range.

In your case, the KML would be:

<Placemark>
    <styleUrl>#multiTrack</styleUrl>
    <gx:Track>
        <altitudeMode>clampToGround</altitudeMode>
        <when>2014-09-17T07:25:06.875-07:00</when><gx:coord>-122.4167 37.7833 0</gx:coord>
        <when>2014-09-18T12:06:42.745-07:00</when><gx:coord>-220.3167 35.6833 0</gx:coord>
    </gx:Track>
</Placemark>

p.s. thanks for providing the .kml file, made this very convenient to debug!

Answer 2

This is a bug in the google maps javascript API. The bug was introduced in May 2015. Here's the bug report. Adding your vote may speed a fix.