ng2-map

Angular2 Google Map (ng-map version 2)

• 

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. Update system.config.js to recognize ng2-map.

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

3. import Ng2AutoCompleteModule 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 { Ng2Map} from 'ng2-map';
    
    @NgModule({
      imports: [BrowserModule, FormsModule, Ng2Map],
      declarations: [AppComponent],
      bootstrap: [ AppComponent ]
    })
    export class AppModule { }
   

Use it in your template

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

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

• systemjs.config.js
• app.module.ts
• and app.component.ts.

NOTE: if you domain is new, and you are having api key error, please specify your api key like the following

  import { NG2_MAP_DIRECTIVES, Ng2MapComponent } from "ng2-map";  // <--- this
  // Ng2MapComponent['apiUrl'] = "https://maps.google.com/maps/api/js?key=YOUR_KEY";  // ???

  @Component({ ... })
  export class AppComponent {
    constructor() {
      Ng2MapComponent['apiUrl'] = "https://maps.google.com/maps/api/js?key=YOUR_KEY";
    }
  }

This module is only improved and maintained by contributors like you;

As a contributor, 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	supported as `ng2-map`
Marker	MarkerOptions	Marker Events	supported as `marker`
InfoWindow	InfoWindowOptions	InfoWindow Events	supported as `info-window`
Circle	CircleOptions	Circle Events	Coming soon
Polygon	PolygonOptions	Polygon Events	Coming Soon
Polyline	PolylineOptions	Polyline Events	Coming Soon
GroundOverlay	GroundOverlayOptions	GroundOverlay Events	Coming Soon
FusionTablesLayer	FusionTablesLayerOptions	FusionTablesLayer Events	Coming Soon
HeatMapLayer	HeatMapLayerLayerOptions	HeatMapLayer Events	Coming Soon
KmlLayer	KmlLayerLayerOptions	KmlLayer Events	Coming Soon
Data	DataOptions	Data Events	Coming Soon `map-data`
BicyclingLayer	BicyclingLayerOptins	BicyclingLayer Events	Coming Soon
MapsEngineLayer	MapsEngineLayerOptins	MapsEngineLayer Events	Coming Soon
TrafficLayer	TrafficLayerOptions	TrafficLayer Events	Coming Soon
StreetViewPanorama	StreetViewPanoramaOptions	StreetViewPanorama Events	Coming Soon
DrawingManager	DrawingManagerOptions	Drawing Manager Events	Coming Soon
Autocomplete	AutocompleteOptions	Autocomplete Events	Coming Soon
DirectionsRenderer	DirectionsRendererOptions	DirectionsRenderer Events	Coming Soon

For Developers

• To run index.html in test directory

    $ cd test
    $ python -mSimpleHTTPServer
  

• To test with src, update systemjs.config.ts to use src directory

    // For Development tet
    map['ng2-map'] = 'src';
    packages['ng2-map'] = { main: 'index.ts', defaultExtension: 'ts' };
  

• To publish npm package

    $ npm run build
    * npm publish
  

• To test with npm package, update systemjs.config.ts to use dist directory

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

For Developers

To start

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