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

Solution 1:

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>

Solution 2:

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


        ]
})