@ngui/map NPM | npm.io

map

Angular2 Google Map (ng-map version 2)

If you like this, you may also like these;

ng-map Google Maps Wrapper for Angular 1.*
react-openlayers React + OpenLayers
geo-coder Google/Bing/OpenStreetMap Geocoding/autocomplete/reverse lookup

Design Principle

All google properties must be able to be defined in html without Javascript.
Thus, basic users don't even have to know what Javascript is.
Expose all original Google Maps V3 api to the user without any exception.
No hiding or manipulation. By doing so, programmers don't need to learn anything about this convenient module. If you know Google Maps V3 API, there shouldn't be a problem using this module.

Usage

Install node_module @ngui/map and typings

$ npm install @ngui/map @types/googlemaps --save

For SystemJs users only, update system.config.js to recognize @ngui/map.
```
map['@ngui/map'] = 'node_modules/@ngui/map/dist/map.umd.js';
```

import NguiMapModule to your AppModule

import { NgModule } from '@angular/core';
import { FormsModule } from "@angular/forms";
import { BrowserModule  } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { NguiMapModule} from '@ngui/map';

@NgModule({
  imports: [
    BrowserModule, 
    FormsModule, 
    NguiMapModule.forRoot({apiUrl: 'https://maps.google.com/maps/api/js?key=MY_GOOGLE_API_KEY'})
  ],
  declarations: [AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Use it in your template

<ngui-map center="Brampton, Canada"></ngui-map>

or,

<ngui-map [options]="mapOptions"></ngui-map>

For a full example, please check out the app directory to see the example:

main.ts
and app/map-components.

How to get a instance(s) of a map or markers

Nui2MapComponent fires mapReady$ event with map object
Each ngui-map directives fires initialized$ event with its Google map object, e.g. google.maps.Marker
Other way is to get a map object is to any event. All event has target value, which is a Google map object.

<ngui-map 
  zoom="13" 
  center="37.775, -122.434" 
  (mapReady$)="onMapReady($event)"
  (mapClick)="onMapClick($event)"
  (idle)="onIdle($event)"
  mapTypeId="satellite">
    <marker *ngFor="let pos of positions" 
      [position]="pos"
      (initialized$)="onMarkerInit($event)"></marker>
</ngui-map>

In your app component:

export class MyAppComponent {
  onMapReady(map) {
    console.log('map', map);
    console.log('markers', map.markers);  // to get all markers as an array 
  }
  onIdle(event) {
    console.log('map', event.target);
  }
  onMarkerInit(marker) {
    console.log('marker', marker);
  }
  onMapClick(event) {
    this.positions.push(event.latLng);
    event.target.panTo(event.latLng);
  }
}

Need Contributors

This ngui-map module is only improved and maintained by volunteers like you;

As a volunteer, it's NOT required to be skilled in Javascript or Angular2. It’s required to be open-minded and interested in helping others. You can contribute to the following;

Updating README.md
Adding clear and descriptive comments
Answering issues and building FAQ
Documentation
Translation

As a result of your active contribution, you will be listed as a core contributor on https://ng2-ui.github.io, and a member of ng2-ui too.

If you are interested in becoming a contributor and/or a member of ng-ui, please send me email to allenhwkim AT gmail.com with your github id.

Google Maps V3 Compatibility Table

Custom Directives

custom-marker
- properties: position
- event: all marker events.

For Developers

To start

$ git clone https://github.com/ng2-ui/map.git
$ cd map
$ npm install
$ npm start

Before you make a PR

If you are planning to make a lot of code changes in the PR, we encourage to create an issue first:

To avoid duplicate work
To encourage discussion of solutions
We do not want to reject a PR because of you've chosen a wrong approach or direction after a lot of effort has been made.

List of available npm tasks

npm run : List all available tasks
npm start: Run app directory for development using webpack-dev-server with port 9001
npm run clean: Remove dist folder
npm run clean:dist: Clean up unnecessary dist folder within dist and app directory
npm run lint: Lint TypeScript code
npm run build:ngc: build ES module
npm run build:umd: Build UMD module map.umd.js
npm run build:app: Build app/build/app.js for runnable examples
npm run build: Build all(build:ngc, build:umc, build:app, and clean:dist)