Showing posts with label ng2-ui-map. Show all posts
Showing posts with label ng2-ui-map. Show all posts


October 22, 2017
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

  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.


  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
  4.  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';  
       imports: [  
        NguiMapModule.forRoot({apiUrl: ''})  
       declarations: [AppComponent],  
       bootstrap: [ AppComponent ]  
      export class AppModule { }  

Use it in your template

 <ngui-map center="Brampton, Canada"></ngui-map>  
 <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.
  center="37.775, -122.434"   
   <marker *ngFor="let pos of positions"   
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) {  
  onMarkerInit(marker) {  
   console.log('marker', marker);  
  onMapClick(event) {  

Google Maps V3 Compatibility Table

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


  • properties: position
  • event: all marker events

Note: Special thanks to ng2-ui


Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.