The Map

Core Component

At the heart of the library is the map. The map component will always be the top-level container for all other library components or directives.

To place a map in your template, use the <bs-google-map/> element.

Haha, yeah... 😄 bs stands for BeSpunky... Not the other thing you were thinking. 😏

Content and tools related to the map instance you're defining will always go as children of your <bs-google-map/> element.

Options

Live demo

To configure your map, simply bind options using angular's syntax:

<bs-google-map *bsSafe 
               [center]="center"
               [zoom]="3"
               [clickableIcons]="false"
               ...
></bs-google-map>

See API for a complete list of supported bindable @Input options and their types.

Events

Live demo

To handle events emitted by your map, simply bind handlers using angular's syntax and pass in the $event variable:

<bs-google-map *bsSafe 
               (click)="onMapClick($event)"
               (mouseMove)="onMapMouseMove($event)"
               ...
></bs-google-map>

See API for a complete list of supported bindable @Output events and their $event type.

Styles

Inside of a <bs-google-map/> component, the top level container is always a div.google-map element. The map component is defined with no view encapsulation, meaning you can use the .google-map css selector to identify map elements and apply styles from your host component if necessary.

Another way would be using a ::ng-deep .google-map css selector to identify map elements and apply styles from your host component if necessary. See ::ng-deep deprecation discussion.

Next Steps

More About The Map

Other topics