Search code examples
google-mapsgoogle-maps-api-3google-maps-styling

Draw a path on a Google Map on one side only?


I'd like to replicate the outline effect shown on this map: https://maps.google.co.uk/maps?hl=en&safe=off&q=switzerland&ie=UTF-8&hq=&hnear=0x478c64ef6f596d61:0x5c56b5110fcb7b15,Switzerland&gl=uk&ei=PXO3UK3UPMS1hAfmjoDgBQ&sqi=2&ved=0CKQBELYD

In other words, I'd like to draw a path that:

  • is shown along one side only of the path defined in GeoJSON
  • fades in transparency from the outer side of the path to the inner?

Are either of these things possible with the Google Maps API?


Solution

  • I believe to do this you would need to create a custom overlay - which can be a somewhat daunting task. See the documentation on Custom Overlays for a basic example.

    Were I implementing this, I would create an overlay which used HTML5 canvas elements as tiles.