ng2-map

Angular2 Google Map (ng-map version 2)

• 
• Plunker Example
• Place Auto Complete Plunker Example

If you like this, you also may 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

1. 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.

2. Expose all original Google Maps V3 api to the user without any exception.

   No hiding, nor manipulation. By doing so, programmers don't need to learn any about this convenient module. If you know Google Maps V3 API, there shouldn't be no problem using this module.

Usage

1. Install node_module ng2-map and typings

    $ npm install ng2-map @types/google-maps --save

2. For SystemJs users only, update system.config.js to recognize ng2-map.

    map['ng2-map'] = 'node_modules/ng2-map/dist';
    packages['ng2-map'] = { main: 'ng2-map.umd.js', defaultExtension: 'js' }

3. import Ng2MapeModule 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 { Ng2MapModule} from 'ng2-map';
   
    @NgModule({
      imports: [
        BrowserModule, 
        FormsModule, 
        Ng2MapModule.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

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

or,

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

For full example, please check out app directory to see the example of;

• main.ts
• and app/map-components.

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

• Ng2MapComponent fires mapReady$ event with map object
• Each ng2-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.

<ng2-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>
</ng2-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 ng2-map module is only improved and maintained by volunteers like you;

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

• Updating README.md
• Making more and clearer comments
• Answering issues and building FAQ
• Documentation
• Translation

In 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/ng2-map.git
$ cd ng2-map
$ npm install
$ npm start

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 ng2-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)