CODEWITHSUNDEEP
javascriptjsongoogle-maps
Nick Toye
Nick Toye

Reputation: 95

Using JSON files in Google Maps styling

I'm having a bit of a nightmare with this Google Maps custom styling wizard.

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.

Uncaught InvalidValueError: not a Feature or FeatureCollection

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.

Here is my code in the head of my document.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
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);

</script>

My JSON 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" }
        ]
    }
]
}

Any ideas what I'm doing wrong here? This is my first go at doing maps.

Upvotes: 4

Views: 14404

Answers (2)

geocodezip
geocodezip

Reputation: 161384

You are confusing the JSON to style a map which is what you get out of the Map Styling Wizard and the GeoJSON used by the data layer

They go in different places and do different things. To style the map, put the "style" data in the MapOptions styles property.

The data layer is used for displaying geographic information on the map (markers, polygons, polylines,...), not styling the map tiles.

Working code snippet with your map styles (if you want to load them from an external file, you can, but you wouldn't use the data layer, you would just assign the styling data to a global variable and use that for the styles property):

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
    },
    styles: [{
      "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"
      }]
    }]
  });

  // 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);
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

Upvotes: 6

Aditya
Aditya

Reputation: 196

you need to something like this:

map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 16,
center: {lat: 53.668398, lng: -2.167713},
styles: [
        {
        "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" }
              ]
          }


        ]
})

Upvotes: 0

Related Questions