google maps api does not load FEMA kmz

Question

I have a problem where I cannot load a KMZ file from FEMA (https://hazards.fema.gov/femaportal/kmz/FEMA_NFHL_v3.1.kmz) on Google Maps API. When I run the JavaScript, the map is just blank. No errors. However, I can load other kmz which are not from FEMA.

<html>
<head>
    <script src="https://maps.googleapis.com/maps/api/js?key={YOUR API KEY}">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/kmz/ZipFile.complete.js">
    </script>
    <script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/kmz/geoxml3.js">
    </script>
    <script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/ProjectedOverlay.js">
    </script>

    <script>

        function initialize() {

            var options = {
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("canvas"), options);
            var parser = new geoXML3.parser({ map: map, processStyles: true });

            //Download kmz from FEMA https://hazards.fema.gov/femaportal/kmz/FEMA_NFHL_v3.1.kmz and put in same folder as this html file
            parser.parse("FEMA_NFHL_v3.1.kmz");
        }

        $(document).ready(initialize);

    </script>
</head>
<body>
    <div id="canvas" style="width:1000px; height:500px"></div>
</body>
</html>

google maps api does not load FEMA kmz

0 Answers0