Search code examples
javascriptgoogle-maps-api-3kml

Google maps api kml filling incorrect


I have an simple HTML and simple KML file I ma trying to display in Google maps. The problem is the filling of the single polygon isn't working correctly. If you look at the example below, you can see the polygon is filled on the right side (which is correct for my framing). Zoom in one level and the filling flips to the other side. Zoom in again, and it flips back. Zooming out once and it flips, zoom out twice and it is back to the correct filling. And it remains correct as you keep zooming out.

I have read elsewhere about using geoxml3 to parse the KML rather than having Google do it. The trunk download doesn't support Polygons though,s I (think) I downloaded the branch version of it. Based on that, it appears it is parsing the KML and creating google.maps.Polyline objects. My problem is I need to display hundreds (of not thousands) of polygons and the load time convert the KML I expect would be performance limiting. Not to mention, I would like to have Google's zoom level simplification of KML files.

Any thoughts? This has been working for a couple of years and just broke a few weeks ago. Tested on Chromium 37 (linux) Firefox 38 (linux), Chrome 43 (Win7), Firefox 37 (Win7), and IE11 (Win7). Is my only other option trying to use a google.maps.ImageMapType() with a google.maps.overlayMapTypes() which would require quite a bit of re-enginering?

Thanks!

The HTML page:

<html>
<head>
<style>
   #mapCanvas {height: 600px;width: 600px;}
</style>
</head>
<body>
<div id="mapCanvas"></div>
<script src="http://maps.google.com/maps/api/js?v=3.&libraries=geometry,drawing,places&sensor=false"/></script>
<script>
    var googleMap = new google.maps.Map(document.getElementById('mapCanvas'), 
          maxZoom: 20,
          minZoom: 4,
          zoom: 17,
          panControl: true,
          zoomControl: true,
          scaleControl: true,
          streetViewControl: true,
          tilt: 0,
          center: new google.maps.LatLng(39.77420517, -94.83232857)
    });
    var kml = new google.maps.KmlLayer('http://itic.occinc.com/new5.kml', 
        preserveViewport: true,
        suppressInfoWindows:true,
        clickable: false,
        map: googleMap
    });
</script>
</body>
<html>

And the KML (in case it disappears of my server):

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Folder>
<name>District Polygon Folder&lt;/name>
  <open>1&lt;/open>
  <description>&lt;/description>
  <Placemark>
    <name>Folder object 2 (Polygon)&lt;/name>
    <Polygon>
      <altitudeMode>clampToGround&lt;/altitudeMode>
      <outerBoundaryIs>
        <LinearRing>
          <coordinates>
            -94.84433855, 39.53505883
            -94.83010566, 39.82194139
            -94.59858395, 39.8204777
            -94.59383965, 39.53213146
            -94.84433855, 39.53505883
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
</Folder>
</kml>

Solution

  • There is a bug in the Google KML renderer.

    Issue 8015