title: Using JSON files in Google Maps styling
body: <p>I'm having a bit of a nightmare with this Google Maps custom styling wizard.</p>
  
  <p>Ok, I have my map and it loads fine, but I am trying to add my JSON file to custom style the thing and I get an error.</p>
  
  <p><strong>Uncaught InvalidValueError: not a Feature or FeatureCollection</strong></p>
  
  <p>Also the error seems to come from a file called main.js - but I have a file called main.js and it doesn't have this code in it.</p>
  
  <p>Here is my code in the <strong>head</strong> of my document.</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp"&gt;&lt;/script&gt;
  &lt;script&gt;
  var map;
  function initialize() {
  // Create a simple map.
  map = new google.maps.Map(document.getElementById('map-canvas'), {
  zoom: 16,
  center: {lat: 53.668398, lng: -2.167713}
  });
  
  // Load a GeoJSON from the same server as our demo.
  map.data.loadGeoJson('http://pixelsandcode.local:5757/map.json');
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>My JSON code:</p>
  
  <pre><code>{
  "type": "FeatureCollection",
  "features": [
      {
          "featureType": "landscape",
          "elementType": "geometry.fill",
          "stylers": [
              { "color": "#ffffff" }
          ]
      },{
          "featureType": "poi",
          "elementType": "geometry",
          "stylers": [
              { "color": "#efefef" }
          ]
      },{
          "featureType": "water",
          "stylers": [
              { "visibility": "off" }
          ]
      },{
          "featureType": "road",
          "elementType": "geometry.stroke",
          "stylers": [
              { "visibility": "on" },
              { "color": "#dedddd" }
          ]
      },{
          "featureType": "road",
          "elementType": "geometry.fill",
          "stylers": [
              { "visibility": "on" },
              { "color": "#efefef" }
          ]
      },{
          "featureType": "poi",
          "elementType": "labels.icon",
          "stylers": [
              { "visibility": "on" }
          ]
      }
  ]
  }
  </code></pre>
  
  <p>Any ideas what I'm doing wrong here? This is my first go at doing maps.</p>