Errisy-Map

Angular 2 simple wrap of Google Map API

Why Simple Wrap?

There are some complex wrap that allows you to place markers in Google Map in a way similar to place elements in a parent element. However, those are too heavy as a wrap for Google Map API.

To make the API as light as possible, here I provide a simple solution that allows you to load Google Map API.

How to use?

In your @NgModule

@NgModule({
    imports: [ ErrisyMapModule.forRoot({ key: 'Your Google Map API Key' }), ...YourModules],
    declarations: [ ...YourComponents],
    entryComponents: [],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

In your component html, where you want to use Google Map. The selector is [google-map].

MapInit is the most important part, which is the callback when Google Map is loaded. You can then do additional setups such as load customized Google Map Markers.

<div google-map [Lng]="location.x" [Lat]="location.y" [Zoom]="12" (MapInit)="onMapReady($event);" class="app-map">
</div>

How to Customized (extends) Markers or Other Google Map classes?

Since Google Map API is loaded asynchronously, you can not extend their classes until you have loaded the API.

To extends the API classes, you must import the API after Google Map is loaded.

With SystemJS in Angular 2, there is a simple solution:

//Define your own marker by extending Google Map Marker in file 'customized.marker.ts'

export class MyCustomizedMarker extends google.maps.Marker{

}

Then you can load it via SystemJS.import in the MapInit callback.

import * as CustomizedMarkers from 'customized.marker'; // this will just import the definition, it will disappear in the compiled the .js file.


@Component({
    selector: 'app',
    template: `
    <div google-map [Lng]="location.x" [Lat]="location.y" [Zoom]="12" (MapInit)="onMapReady($event);" class="app-map">
    </div>
    `
})
export class MyApp{
    this.CustomizedMarkersModule: typeof CustomizedMarkers; 
    onMapReady($event: google.maps.Map){
        this.CustomizedMarkersModule = await SystemJS.import('...foldername/markers.js'); //load the customized marker module
        let myMarker = new CustomizedMarkersModule.MyCustomizedMarker(); //create your customized marker
    }
}