Search code examples
javascriptgoogle-mapsgoogle-maps-api-3geojson

loadGeoJson not working

I am using .loadGeoJson to load geojson data into a Google Maps API instance. I have used this previously but this time it is not loading any data and I am not sure why.

The previous code I have used is:

var localLayer = new google.maps.Data();
localLayer.loadGeoJson('JSON/local.geojson');
localLayer.setMap(map);

My current code looks like:

JavaScript:

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 39.154743,
            lng: -77.240515
        },
        zoom: 10
    });
};
$(document).ready(function() {
    initMap();
    var localLayer = new google.maps.Data();
    localLayer.loadGeoJson('json/Schools.geojson');
    localLayer.setMap(map);
});

HTML:

<body>
    <div id="page">
        <div id="content">
            <h1>Title</h1>
            <div id="map"></div>
        </div>
    </div>
</body>

CSS:

body {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
}

#map {
    height: 400px;
    width: 400px;
    margin: 0 auto;
    border: 1px solid black;
    box-shadow: 3px 3px 10px 3px black;
}

The file path is json/Schools.geojson.

What am I doing wrong?

Solution

  • Apparently Schools.geojson contains invalid coordinates, for example: [1263179.3749040514, 541288.18736040592]. You could utilize Data Layer API to validate Geo JSON data. Once incorrect lat/lng values has been provided, Data Layer API returns 90 value for for latitude property of google.maps.LatLng object:

    Add the following line:

    schoolLayer.addListener('addfeature', validateData);

    where 

    function validateData(o) {

   var validateCoordinates = function (items) {
        var validAll = items.every(function (item) {
            var latLngs = item.getArray();
            valid = latLngs.every(function (latLng) {
                return isValidLatLng(latLng);
            });
            return valid;
        });
        return validAll;
    };

    var f = o.feature;
    var geometry = f.getGeometry();
    if (geometry.getType() == "MultiPolygon") {
        var allCoords = geometry.getArray();
        allCoords.forEach(function(coords) {
            if (!validateCoordinates(coords.getArray())) {
                document.getElementById('output').innerHTML += 'Geo JSON contains invalid lat/lng'; 
            }
        });
    } else {
        var coords = geometry.getArray();
        if (!validateCoordinates(coords)) {
             document.getElementById('output').innerHTML += 'Geo JSON contains invalid lat/lng'; 
        }
    }
}



function isValidLatLng(latLng) {
    return latLng.lat() != 90;
}

    Here is a working example that demonstrates how to validate Geo JSON.