Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Styling Google Maps - Javascript API v3 - Outline on coastlines?

I'm trying to style up a Google Map to match a design I've been given, and on the design there is a stroke around the outside of all the countries, as well as a stroke on dividing borders.

The effect I'm going for is as below: enter image description here

My code for the styling is currently as follows:

var styles =   [
        {
          featureType: "water",
          stylers: [
            { visibility: "on" },
            { color: "#ffffff" }
          ]
        },{
          featureType: "landscape",
          stylers: [
            { color: "#f7f7f5" }
          ]
        },{
          featureType: "road",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "poi",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "administrative.country",
          stylers: [
            { color: "#d2cdcd" },
            { weight: 1 }
          ]
        },{
          featureType: "administrative.country",
          elementType: "labels",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "administrative.province",
          elementType: "geometry",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "administrative.locality",
          elementType: "labels",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "administrative.province",
          elementType: "labels",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "water",
          elementType: "geometry.stroke",
          stylers: [
            { color: "#4cfff5" }
          ]
        }
      ];

Any idea if what I am after is possible?

Thanks!

EDIT: The above styles give me the following

enter image description here

like image 242
Probocop Avatar asked Jul 04 '12 10:07

Probocop


People also ask

Can you style Google Maps API?

The Google Maps APIs now support you in creating beautiful styled maps for your Android and iOS apps as well as your website using the same JSON style object.

How do I add a style to Google Maps?

Create a new styleIn the Google Cloud Console, go to the Map Styles page. Click Create Style, and choose the Google Map radio button. Click Save. In the Save and Publish Map dialog, enter a map name and optional description, and click Save.


1 Answers

You currently can only define the fill for water but not the outline.

like image 84
aemkei Avatar answered Nov 17 '22 01:11

aemkei