Google Maps加载本地GeoJSON报错：Cannot read property 'data' of undefined

Hey there! Let’s figure out why you’re running into this Uncaught TypeError: Cannot read property 'data' of undefined error—especially since your GeoJSON works perfectly with Google’s drag-and-drop data layer tool. Here are the most likely issues to check:

1. Your Map Object Isn’t Fully Initialized #

This error almost always means you’re trying to access map.data before the Google Map itself is ready. The Maps API loads asynchronously, so if your GeoJSON loading code runs before the map finishes initializing, the map variable will be undefined.

Fix it:
Make sure all code that interacts with map.data lives inside your map initialization function (usually initMap). Here’s a clean example:

function initMap() {
  // First create the map instance
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });

  // Now load your GeoJSON—this is safe because the map exists now
  map.data.loadGeoJson('your-local-file.geojson');
}

Also double-check your API script tag includes the callback=initMap parameter, which tells the API to run your initialization function once it’s ready:

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

2. Local File CORS Restrictions #

Even though drag-and-drop works, loading local GeoJSON directly via loadGeoJson() can trigger browser security blocks when you test with the file:// protocol (opening your HTML file directly in the browser). Browsers block local file requests to prevent malicious behavior, which can cause the GeoJSON load to fail silently—and sometimes lead to the undefined error you’re seeing.

Fix it:
Serve your files through a local web server instead. It’s super easy with these tools:

• Python 3: Run python -m http.server in your project folder, then visit http://localhost:8000
• Node.js: Run npx http-server (install it first if needed), then access your page via the local server URL

3. Scope Issues with the map Variable #

If you declared your map variable inside a function without making it accessible to the code that loads GeoJSON, it’ll be undefined outside that function. For example:

// Bad: map is trapped inside initMap's scope
function initMap() {
  const map = new google.maps.Map(...);
}
// This will fail because map doesn't exist here
map.data.loadGeoJson('file.geojson');

Fix it:
Either keep your GeoJSON loading code inside initMap (best practice) or declare map as a global variable for testing:

let map; // Global variable
function initMap() {
  map = new google.maps.Map(...);
  map.data.loadGeoJson('your-file.geojson');
}

4. Incorrect GeoJSON File Path #

A tiny typo in your file path can cause the request to fail, which might lead to unexpected errors. Double-check:

• If your GeoJSON is in the same folder as your HTML: use 'filename.geojson'
• If it’s in a subfolder: use 'subfolder/filename.geojson'

Pro tip: Open your browser’s DevTools (F12), go to the Network tab, and reload your page. If you see a 404 error for your GeoJSON file, the path is definitely wrong.

内容的提问来源于stack exchange，提问作者Arien Shibani