CODEWITHSUNDEEP
javascriptjsongoogle-mapsgoogle-maps-api-3
Jon Glazer
Jon Glazer

Reputation: 785

Google Maps API Solid State Borders

When creating a map, the state borders keep coming up as dashed lines. Is there any way to make them solid? I am working with the province settings in the json but I cannot seem to find a directive for solid line, perhaps in .stroke?

Upvotes: 2

Views: 3512

Answers (1)

geocodezip
geocodezip

Reputation: 161334

If you can't do it with Styled Maps (and I don't see how you can right now), you could use Styled Maps to hide the state boundaries:

 {
    featureType: 'administrative.province',
    elementType: 'geometry.stroke',
    stylers: [{visibility: '#off'}]
  },

Then add your own (note that you need a source of the boundaries somewhat consistent with the map tiles).

Example of using borders from a FusionTable

proof of concept fiddle

proof of concept fiddle with styled borders

screenshot of resulting map

code snippet:

function initMap() {
  // Styles a map in night mode.
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 40.674,
      lng: -73.945
    },
    zoom: 7,
    styles: [{
      featureType: 'administrative.province',
      elementType: 'geometry.stroke',
      stylers: [{
        visibility: '#off'
      }]
    }, ]
  });
  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'kml_4326',
      from: '19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA'
    },
    map: map
  });
}
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Upvotes: 4

Related Questions