ng2-map

Angular2 Google Map (ng-map version 2)

• 
• Plunker Example

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 learnthis 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],
      declarations: [AppComponent],
      bootstrap: [ AppComponent ]
    })
    export class AppModule { }
   

4. Your Google maps may require API key, then override apiUrl

    import { Component } from '@angular/core';
    import { Ng2MapComponent } from 'ng2-map';
   
    @Component({ ... })
    export class AppComponent {
   
      constructor() {
        Ng2MapComponent['apiUrl'] = 'https://maps.google.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXX';
      }
    }
   

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.component.ts.

How to get instance of a map

When map is ready Ng2MapComonent fires mapReady$ event with map object

<ng2-map zoom="13" center="37.775, -122.434" mapTypeId="satellite">
</ng2-map>

In your app component,

import {Ng2MapComponent} from "ng2-map";

export class MyAppComponent {
  @ViewChild(Ng2MapComponent) ng2MapComponent: Ng2MapComponent;
  public map: google.maps.Map;
  ngOnInit() {
    this.ng2MapComponent.mapReady$.subscribe(map => {
      this.map = map;
    })
  }
}

How to get instance of a map object

To get it from @ViewChild instance

When any map directive is initialized, each directive fires initialized$ event with its object. For HTML like the following,

<ng2-map zoom="13" center="37.775, -122.434" mapTypeId="satellite">
  <marker position="37.775, -122.434"></marker>
</ng2-map>

In your app component, use initialized$ event of a map object component, which is a ViewChild

import {Marker} from "ng2-map";

export class MyAppComponent {
  @ViewChild(Marker) marker: Marker;
  public marker: google.maps.Marker;
  ngOnInit() {
    this.Marker.initialized$.subscribe(marker => {
      this.marker = marker;
    })
  }
}

To get grouped instances from a map instance

import {Ng2MapComponent} from "ng2-map";

export class MyAppComponent {
  ngOnInit() {
    this.ng2MapComponent.mapReady$.subscribe(map => {
      console.log('all markers', map.markers);
    })
  }
}

How to access event of an object

Every event has a google map event as a parameter. In addition, event also has a target, which is a google map object.

HTML Example

  <ng2-map zoom="4" center="-25.363882, 131.044922" (click)="onClick($event)">
    <marker *ngFor="let pos of positions" [position]="pos"></marker>
  </ng2-map>

Javascript Example

  onClick(event) {
    if (event instanceof MouseEvent) return;
    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

Object	Options	Events	Note
Map	MapOptions	Map Events	Google Simple Map Example ng2-map example
Marker	MarkerOptions	Marker Events	Google Simple Marker Example ng2-map marker example
InfoWindow	InfoWindowOptions	InfoWindow Events	Google Infowindows Example ng2-map info-window example
Circle	CircleOptions	Circle Events	Google Circle example ng2-map circle example
Polygon	PolygonOptions	Polygon Events	Google Polygon example ng2-map polygon example
Polyline	PolylineOptions	Polyline Events	Google Polyline Example ng2-map polyline example
GroundOverlay	GroundOverlayOptions	GroundOverlay Events	Google Simple Ground Overlay Example ng2-map ground-overlay example
FusionTablesLayer	FusionTablesLayerOptions	FusionTablesLayer Events	Experimental Status - No Plan to implement
HeatmapLayer	HeatmapLayerOptions	HeatmapLayer Events	Google Heatmap Layer ng2-map heatmap-layer example
KmlLayer	KmlLayerOptions	KmlLayer Events	Google Kml Layer ng2-map kml-layer example
Data	DataOptions	Data Events	Google Layer Data Example ng2-map data example
BicyclingLayer	BicyclingLayerOptions	BicyclingLayer Events	Google Bycycling Layer Example ng2-map bicycling-layer example
TrafficLayer	TrafficLayerOptions	TrafficLayer Events	Google Traffic Layer Example ng2-map traffic-layer example
TransitLayer	TransitLayerOptions	TransitLayer Events	Google Transit Layer Example ng2-map transit-layer example
StreetViewPanorama	StreetViewPanoramaOptions	StreetViewPanorama Events	Google Streetview Example ng2-map streetview-panorama example
AutoComplete	AutoComplete Options	AutoComplete Events	Google Places Autocomplete Example ng2-map places-auto-complete example
DirectionsRenderer	DirectionsRenderer Options	DirectionsRenderer Events	Google Directions Example ng2-map directions-renderer example
DrawingManager	DrawingManager Options	DrawingManager Events	Google Drawing Manager Example ng2-map drawing-manager example

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)