Angular-google-maps: Setting strokeWeight on a circle throws an error and doesn't add the stroke

Created on 25 Nov 2016 · 11Comments · Source: SebastianM/angular-google-maps

Issue description
If you add the strokeWeight property google maps throws an error:

Uncaught TypeError: f[r] is not a function

Steps to reproduce and a minimal demo of the problem

http://plnkr.co/edit/EjWE2hRU9q3DwQh90BCE?p=preview

_What steps should we try in your demo to see the problem?_

Run it and open the console.

Current behavior
An error is thrown.

Expected/desired behavior
The circle shows a stroke with the defined weight

angular2 & angular2-google-maps version
angular 2.2 and angular2-google-maps 0.16.0

Other information
This happens because you are passing the stroke position value as CENTER string but that is not valid for google maps since it is expecting google.maps.StrokePosition.CENTER (OUTSIDE or INSIDE) which behind the scenes is an enum with some numeric value not a string.

urgent AgmCircle bug

Source

cesarp

👍8

Most helpful comment

@SebastianM any progress with that regarding information @cesarp provided? this issue is quite old...

As a workaround you can pass enum to strokePosition input instead of string. For instance

google.maps.StrokePosition.CENTER // outputs 0

then pass 0:

<agm-circle
  [latitude]="55.6713442"
  [longitude]="12.5237847"
  [radius]="1000"
  [strokeOpacity]="1"
  [strokePosition]="0" <-- here's the trick
  [strokeWeight]="2"
  [strokeColor]="'#706bd6'"
  [fillColor]="'#706bd6'"
  [fillOpacity]="0.5">
</agm-circle>

poltorak on 29 Nov 2017

👍16 🎉8

All 11 comments

@cesarp thank you! Added one comment.

SebastianM on 1 Dec 2016

Any update or work-around? I've run into the same issue.

rg1220 on 7 Sep 2017

👍9

Any update with this issue? I've encounter the same issue also.

santosmken on 2 Nov 2017

@santosmken

I added [strokePosition]="1" to my agm-circle tag. That adds the circle. However, now I have a different problem in that strokeColor and fillColor values are not being honored. The stroke and the fill is black and cannot be changed.

shuchow on 6 Nov 2017

👍1

@shuchow did you paste the code directly on your node_modules directory? Because mine is working properly and the behavior I want is correct. The code should be pasted on

node_modules/@agm/services/google-maps.api-wrapper.js LINE 46-51

santosmken on 6 Nov 2017

@SebastianM any progress with that regarding information @cesarp provided? this issue is quite old...

As a workaround you can pass enum to strokePosition input instead of string. For instance

google.maps.StrokePosition.CENTER // outputs 0

then pass 0:

<agm-circle
  [latitude]="55.6713442"
  [longitude]="12.5237847"
  [radius]="1000"
  [strokeOpacity]="1"
  [strokePosition]="0" <-- here's the trick
  [strokeWeight]="2"
  [strokeColor]="'#706bd6'"
  [fillColor]="'#706bd6'"
  [fillOpacity]="0.5">
</agm-circle>

poltorak on 29 Nov 2017

👍16 🎉8

@SebastianM Why this is still open? Please change it on docs or in code. I lost much time on this.

Pitkox on 10 Oct 2018

I run into same issue, a fix is needed, string doesn't work but number work 👍

vguleaev on 16 Oct 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.