cosmin-dumitrache/map

Angular2 Google Maps Directives

map

Angular2 Google Map (ng-map version 2)

IMPORTANT NOTICE

After 0.17.0 or higher, ng2-map has been changed to @ngui/map. Here are the changes;

• Module ng2-map has been changed to @ngui/map.

• Directive ng2-map is moved to ngui-map.

• Class name Ng2Map/Ng2MapModule is moved to NguiMap/NguiMapModule.

• 

• Plunker Example

• Place Auto Complete Plunker Example

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

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

1. Install node_module @ngui/map and typings

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

2. For SystemJs users only, update system.config.js to recognize @ngui/map.

    map['@ngui/map'] = 'node_modules/@ngui/map/dist/map.umd.js';
   

3. import NguiMapeModule 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

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

1. To avoid duplicate work
2. 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)