Components: Google Maps Polygon & Polyline & Rectangle & Circle

[Yavorss]

As I see, now the GoogleMaps component has only Marker support, but internally Google maps supports Polygon & Polyline & Rectangle & Circle. Are they part of the current round map or it's a low priority for now?

[crisbeto]

We have support for polyline in master already and rectangle is currently in a feature branch.

[Yavorss]

Are there any problems with the Circle implementation and something that we need to keep in mind if we start working on it?

[crisbeto]

I don't think there are any problems with it, it's just that nobody's asked for it so we haven't built it.

[touhidrahman]

Halfway through upgrading the raw implementation of google-maps to @angular/google-maps in our production app and found that map-circle is not there. Would love to get this feature soon.

[pgg]

Polygon please

[schmorrison]

After some work I got polygons to draw, here is my component:

home.page.ts

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
  center = {lat: 50.3, lng: -104.5};
  zoom = 8;
  polygon: google.maps.LatLngLiteral[] = [];
  options: google.maps.PolygonOptions = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    visible: true
  };

addPoint(event: google.maps.MouseEvent) {
  this.polygon = [...this.polygon, event.latLng.toJSON()];
}

removePoint() {
  this.polygon = this.polygon.slice(0, this.polygon.length - 1);
}


googleMapsLoaded() {
    if ('google' in window && typeof window.google === 'object' && typeof window.google.maps === 'object') {
      google.maps.event.trigger(this.map, 'resize');
      return true;
    }
    return false;
  }
}

home.page.html

<google-map #map *ngIf="googleMapsLoaded()" width="100%" height="80vh" 
            [center]="center" [zoom]="zoom" 
            mapTypeId="HYBRID"
            (mapClick)="addPoint($event)" (mapRightclick)="removePoint()">
            <map-polygon *ngIf="polygon.length > 0" #roofArea [paths]="polygon" [options]="options"></map-polygon>
        </google-map>

[mbehrlich]

The Geometry components are now all in the master branch.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}