Google Maps display province lines

Question

I'm a little bit confused using Google Maps.

I would like to create map with country and province lines. I use stylers to create this lines. I would like to create something like this (I've made screen during change zoom from 7 to 6):

But I can achieve only this:

To get province line I have to zoom on 7 level (I can't see whole Poland), but I want to display it on all levels of zoom (above 7 - 6,5 etc.)

My fragment of stylers:

styles:[
  {
    "featureType": "administrative",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.province",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "invert_lightness": true
      },
      {
        "visibility": "on"
      }
    ]
  },
  {
    "featureType": "landscape",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "landscape.man_made",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "landscape.natural.landcover",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "on"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "on"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "on"
      }
    ]
  }
]

fiddle demonstrating current behavior

can you post the stylers complete ? – Dr.Molle Aug 17 '16 at 12:35 — Dr.Molle, Aug 17 '16 at 12:35

score 1 · Answer 1 · edited May 23 '17 at 10:28

You can't change the behavior of the tiles with styling. If the province boundaries aren't on the tiles at zoom level 6, they can't be styled. The best option is to get the province boundaries for zoom level 6 from some other data source (like this) then hide them above zoom level 6.

related question: Google Maps V3: Draw German State Polygons?

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: styles
    });
  var FT_TableID = 420419;
  var FT_Query = "SELECT 'kml_4326' FROM " + FT_TableID + " WHERE 'name_0' = 'Poland';";
  var FT_Options = {
    suppressInfoWindows: true,
    query: FT_Query
  };
  var boundaries = new google.maps.FusionTablesLayer(FT_TableID, FT_Options);
  boundaries.setMap(map);
  google.maps.event.addListener(map, 'zoom_changed', function() {
    if ((map.getZoom() > 6) || (map.getZoom() < 2)) {
      boundaries.setMap(null);
    } else {
      boundaries.setMap(map);
    }
    document.getElementById('zoom').innerHTML = "zoom= " + map.getZoom();
  });
  geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': "Poland"
  }, function(results, status) {
    if (status === 'OK') {
      map.fitBounds(results[0].geometry.viewport);
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

}
google.maps.event.addDomListener(window, "load", initialize);
var styles = [{
  "featureType": "administrative",
  "elementType": "labels.text",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "administrative.province",
  "elementType": "geometry.stroke",
  "stylers": [{
    "invert_lightness": true
  }, {
    "visibility": "on"
  }]
}, {
  "featureType": "landscape",
  "elementType": "geometry",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "landscape",
  "elementType": "labels",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "landscape.man_made",
  "elementType": "geometry",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "landscape.natural.landcover",
  "elementType": "geometry",
  "stylers": [{
    "visibility": "on"
  }]
}, {
  "featureType": "poi",
  "elementType": "geometry",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "poi",
  "elementType": "labels",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "road",
  "elementType": "all",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "transit",
  "elementType": "geometry",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "transit",
  "elementType": "labels",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "water",
  "elementType": "geometry",
  "stylers": [{
    "visibility": "on"
  }]
}, {
  "featureType": "water",
  "elementType": "labels",
  "stylers": [{
    "visibility": "on"
  }]
}];

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<div id="zoom"></div>
<div id="map_canvas"></div>

Google Maps display province lines

1 Answers1