VS NGX Google Map

A simple Angular component to create a Google Map.

Usage

After installing the package, import the component module in your any application module file

import { VsNgxGoogleMapModule } from 'vs-ngx-google-map';


@NgMpdule({
  ...
  imports: [
    ...,
    VsNgxGoogleMapModule.forRoot()
  ]
})
export class YourAngularModule {
  ...
}

Then, to use the component, simply put the directive in your template along with some parameters like this.

<vngx-google-map [apiKey]="GOOGLE_MAP_API_KEY" [config]="GOOGLE_MAP_CONFIG"></vngx-google-map>

Supported Input

apiKey (String, required) = Your Google Map API key, this is a required input. config (Object, required) = This is where you can config your initialized option in your Google Map, see Google Map Javascript Api for more information about config. Plus, you can also set map box height by sending height property as a number along with this config object. And also, you can obtain Google Map instance after the map has been created by using an output event name afterMapInit. See it all in example code below. In your Angular component file, you have

apiKey = 'YOUR_API_KEY';

sampleMapConfig = {
  height: 400,
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
};

private myMapInstance;

...

afterMapCreated(e) {
  this.myMapInstance = e;
}

And in your template

<vngx-google-map [apiKey]="apiKey" [config]="sampleMapConfig" (afterMapInit)="afterMapCreated($event)"></vngx-google-map>