Google maps API strokePosition simply doesn't work

Question

I've been using the google maps API for years and I have never seen the strokePosition styling option work for shapes. Here is an example of my code, which will draw perfectly if strokePosition is not included:

circle = new google.maps.Circle({
  map: map,
  radius: 50,
  strokeColor: '#00FF00',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  strokePosition: 'CENTER', // causes errors even in chrome
  fillColor: '#00FF00',
  fillOpacity: 0.35,
  center: {lat: -33, lng: 151};
});

I have never seen strokePosition work in all the years I've used the API through many versions, despite it being in the documentation since forever:

https://developers.google.com/maps/documentation/javascript/reference/polygon#PolygonOptions.strokePosition

Note that it doesn't matter that my code shows a circle - the documentation states that strokePosition works on most shapes (and definitely for polygons and circles). Either way, I've tried it on Circles, Polygons and Rectangles and none of them work.

Here is a fiddle for testing: https://jsfiddle.net/1f4rche6/

Google search doesn't seem to produce any results of people who can't get it to work, although I find this very hard to believe. I also can't find a working example or fiddle anywhere online.

Has anyone actually been able to make strokePosition lie INSIDE or OUTSIDE their polygons? If so, what particular brand of magic did you weave to get it to work?

EDIT: It seems this is a bug with the API. I've added it to the bug tracker: https://issuetracker.google.com/issues/177597389

Answer 1

As I said in my comment and sorry for not realizing that earlier, the constants for strokePosition must be used as google.maps.StrokePosition.CENTER , google.maps.StrokePosition.INSIDE and google.maps.StrokePosition.OUTSIDE .

It works as expected when used this way as you can see in the below example. Same rectangle, with the 3 different stroke positions:

 function initialize() { var mapOptions = { zoom: 2, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(40, 9) }; var map_1 = new google.maps.Map(document.getElementById('map-canvas-1'), mapOptions); var map_2 = new google.maps.Map(document.getElementById('map-canvas-2'), mapOptions); var map_3 = new google.maps.Map(document.getElementById('map-canvas-3'), mapOptions); // Create a rectangle var rectangle_1 = new google.maps.Rectangle({ strokeOpacity: 1, strokeWeight: 10, strokeColor: 'yellow', strokePosition: google.maps.StrokePosition.CENTER, fillColor: '#FF0000', fillOpacity: .6, bounds: new google.maps.LatLngBounds( new google.maps.LatLng(33, 3), new google.maps.LatLng(44, 25)), map: map_1, zIndex: 0 }); var rectangle_2 = new google.maps.Rectangle({ strokeOpacity: 1, strokeWeight: 10, strokeColor: 'yellow', strokePosition: google.maps.StrokePosition.INSIDE, fillColor: '#FF0000', fillOpacity: .6, bounds: new google.maps.LatLngBounds( new google.maps.LatLng(33, 3), new google.maps.LatLng(44, 25)), map: map_2, zIndex: 0 }); var rectangle_3 = new google.maps.Rectangle({ strokeOpacity: 1, strokeWeight: 10, strokeColor: 'yellow', strokePosition: google.maps.StrokePosition.OUTSIDE, fillColor: '#FF0000', fillOpacity: .6, bounds: new google.maps.LatLngBounds( new google.maps.LatLng(33, 3), new google.maps.LatLng(44, 25)), map: map_3, zIndex: 0 }); }

 #map-canvas-1, #map-canvas-2, #map-canvas-3 { height: 60px; }

 <div id="map-canvas-1"></div> <div id="map-canvas-2"></div> <div id="map-canvas-3"></div> <.-- Replace the value of the key parameter with your own API key: --> <script src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initialize" async defer></script>