CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3kml
Meta Mussel
Meta Mussel

Reputation: 590

County KML data that works with Google Maps

I want to display county lines on my maps. I have found a several KMLs of converted Census data as various resolution but display.

I created a Google Site map and uploaded several KMLs, including the CTA.kml that Google uses as an example. The CTA (Chicago) displays w/o issue so I know my site is set up correctly. But when I link to gz_2010_us_050_00_20m.kml(from the US Census Bureau) or cb_2014_us_county_20m.kml, nothing appears.

my belief is that the kml format is not valid for Google Maps but I do not get an error or any message. It just doesn't appear.

I included a little test script that I know is correct since I have stolen it from Google.

If it is a KML format issue, does anyone know of a KML for US county lines?

Link to My Site

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <title>KML Layers</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>

    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 11,
            center: {lat: 41.876, lng: -87.624}
        });

        var ctaLayer = new google.maps.KmlLayer({
            url: 'https://sites.google.com/site/countykmltester/gz_2010_us_050_00_20m.kml',
            map: map
        });
    google.maps.event.addListener(ctaLayer, "status_changed", function() {
       alert( "Kml Status:"+ctaLayer.getStatus());
    });
    }

</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>

Upvotes: 2

Views: 1719

Answers (1)

geocodezip
geocodezip

Reputation: 161404

Split your KML file into 3 pieces, zip each one up (to make it KMZ). They work (status OK). Seems that the original error message was misleading...

name                    | kml size  | kmz size  |
-------------------------------------------------
gz_2010_us_050_00_20m_A | 2,687,331 | 932,267   |
gz_2010_us_050_00_20m_B | 2,633,246 | 836,947   |
gz_2010_us_050_00_20m_C | 2,696,354 | 927,571   |
----- original file -----------------------------
gz_2010_us_050_00_20m   | 8,015,535 | 2,693,916 |

from this question on SO: Max. Number of Placemarks in KML for Google Maps:

(this information used to be in the documentation, but is no longer available there, link on archive.org)

updated link to documentation

Size and Complexity Restrictions for KML Rendering in Google Maps

Google Maps currently has specific limitations to the size and complexity of loaded KML files. Below is a summary of the current limits:

Note: these limits are temporary and are subject to change at any time.

Maximum fetched file size (raw KML, raw GeoRSS, or compressed KMZ)  3MB
Maximum uncompressed KML file size  10MB
Maximum number of Network Links 10
Maximum number of total document-wide features  1,000

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {
      lat: 41.876,
      lng: -87.624
    }
  });

  var layerA = new google.maps.KmlLayer({
    url: 'http://www.geocodezip.com/geoxml3_test/kmz/gz_2010_us_050_00_20m_A.kmz',
    map: map
  });
  google.maps.event.addListener(layerA, 'status_changed', function() {
    document.getElementById('status').innerHTML += "layerA:" + layerA.getStatus() + "<br>";
  })
  var layerB = new google.maps.KmlLayer({
    url: 'http://www.geocodezip.com/geoxml3_test/kmz/gz_2010_us_050_00_20m_B.kmz',
    map: map
  });
  google.maps.event.addListener(layerB, 'status_changed', function() {
    document.getElementById('status').innerHTML += "layerB:" + layerB.getStatus() + "<br>";
  })
  var layerC = new google.maps.KmlLayer({
    url: 'http://www.geocodezip.com/geoxml3_test/kmz/gz_2010_us_050_00_20m_C.kmz',
    map: map
  });
  google.maps.event.addListener(layerC, 'status_changed', function() {
    document.getElementById('status').innerHTML += "layerC:" + layerC.getStatus() + "<br>";
  })
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="status"></div>
<div id="map"></div>

Upvotes: 1

Related Questions