Google Maps Renders KML inverse of Google Earth

Question

I have been struggling how to solve a problem with how google maps renders a KML polygon. In Good Earth, it renders the polygon correctly like this:

But in Google maps, when I add this to the map, it incorrectly looks like this:

Surprisingly, this is made of 32 points which go across Africa, NOT the Pacific Ocean!

Why in the world is this being rendered inversely when I specifically indicate the points? Is it just simply ignoring them?

I created a JSFiddle for this here: https://jsfiddle.net/qsz5ec5y/1/

The KML file is here: https://dl.dropboxusercontent.com/u/27946381/testzone.kml

Any ideas as to why this is happening?

Thanks!

Answer 1

I would say the Google Maps KML parser is broken.

Your bug report on the issues list

You KML has a well defined polygon with several points on each side (which should be more than enough to tell it which way the polygon goes):

142.207023447954498,-24.785157829137347 112.016594491497187,-24.785157829137347 81.826165535039934,-24.785157829137347 51.635736578582652,-24.785157829137347 21.44530762212537,-24.785157829137347 -8.745121334331884,-24.785157829137347 -38.935550290789166,-24.785157829137347 -69.125979247246434,-24.785157829137347 -99.316408203703702,-24.785157829137347 -99.316408203703702,-19.291993899650947 -99.316408203703702,-13.798829970164547 -99.316408203703702,-8.305666040678148 -99.316408203703702,-2.812502111191748 -99.316408203703702,2.680661818294652 -99.316408203703702,8.173825747781052 -99.316408203703702,13.666989677267452 -99.316408203703702,19.160153606753852 -69.125979247246434,19.160153606753852 -38.935550290789166,19.160153606753852 -8.745121334331884,19.160153606753852 21.44530762212537,19.160153606753852 51.635736578582652,19.160153606753852 81.826165535039934,19.160153606753852 112.016594491497187,19.160153606753852 142.207023447954498,19.160153606753852 142.207023447954498,13.666989677267452 142.207023447954498,8.173825747781052 142.207023447954498,2.680661818294652 142.207023447954498,-2.812502111191748 142.207023447954498,-8.305666040678148 142.207023447954498,-13.798829970164547 142.207023447954498,-19.291993899650947 142.207023447954498,-24.785157829137347

fiddle showing points above

Your KML also works in geoxml3 (which renders it as native google.maps.Polygon objects) (if you load the KmlLayer you can see the issue)

code snippet showing your rectangle rendered both as KML and a "normal" google.maps.Polygon:

 var geocoder; var map; var ctaLayer; var poly; function initialize() { map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var bounds = new google.maps.LatLngBounds(); var path = []; var coordsStr = kmlCoords.split(" "); for (var i = 0; i < coordsStr.length; i++) { var coords = coordsStr[i].split(','); var latLng = new google.maps.LatLng(coords[1], coords[0]); path.push(latLng); bounds.extend(latLng); var marker = new google.maps.Marker({ position: latLng, map: map, title: latLng.toUrlValue(6) }); } map.fitBounds(bounds); poly = new google.maps.Polygon({ path: path, map: map }); ctaLayer = new google.maps.KmlLayer({ url: 'https://dl.dropboxusercontent.com/u/27946381/testzone.kml' }); ctaLayer.setMap(map); } google.maps.event.addDomListener(window, "load", initialize); function toggleKml() { if (ctaLayer.getMap() == null) { ctaLayer.setMap(map); } else { ctaLayer.setMap(null); } } function togglePolygon() { if (poly.getMap() == null) { poly.setMap(map); } else { poly.setMap(null); } } var kmlCoords = "142.207023447954498,-24.785157829137347 112.016594491497187,-24.785157829137347 81.826165535039934,-24.785157829137347 51.635736578582652,-24.785157829137347 21.44530762212537,-24.785157829137347 -8.745121334331884,-24.785157829137347 -38.935550290789166,-24.785157829137347 -69.125979247246434,-24.785157829137347 -99.316408203703702,-24.785157829137347 -99.316408203703702,-19.291993899650947 -99.316408203703702,-13.798829970164547 -99.316408203703702,-8.305666040678148 -99.316408203703702,-2.812502111191748 -99.316408203703702,2.680661818294652 -99.316408203703702,8.173825747781052 -99.316408203703702,13.666989677267452 -99.316408203703702,19.160153606753852 -69.125979247246434,19.160153606753852 -38.935550290789166,19.160153606753852 -8.745121334331884,19.160153606753852 21.44530762212537,19.160153606753852 51.635736578582652,19.160153606753852 81.826165535039934,19.160153606753852 112.016594491497187,19.160153606753852 142.207023447954498,19.160153606753852 142.207023447954498,13.666989677267452 142.207023447954498,8.173825747781052 142.207023447954498,2.680661818294652 142.207023447954498,-2.812502111191748 142.207023447954498,-8.305666040678148 142.207023447954498,-13.798829970164547 142.207023447954498,-19.291993899650947 142.207023447954498,-24.785157829137347"; 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <input type="button" onclick="toggleKml();" value="toggle KML" /> <input type="button" onclick="togglePolygon();" value="toggle Polygon" /> <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas" style="border: 2px solid #3872ac;"></div>