Angular Google Maps Directives
Alternatives To Map
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Angular Google Maps2,0202,6963674 months ago11July 19, 202049mitTypeScript
Angular 2+ Google Maps Components
Angularjs Google Maps1,568173124 years ago66November 25, 201886mitHTML
The Simplest AngularJS Google Maps V3 Directive
Map25613272 years ago20May 21, 201842TypeScript
Angular Google Maps Directives
Google Maps Autocomplete16576a month ago39December 08, 202227mitTypeScript
Autocomplete input component and directive for google-maps built with angular and material design |
Angular Google Maps Native94427 years ago5August 10, 20155JavaScript
AngularJS directives for the Google Maps Javascript API using the native way
4 years ago3JavaScript
App demonstrating MEAN (Mongo, Express, Angular, and Node) Integration with Google Maps. Created for Scotch IO Tutorial.
Agm Direction796232 years ago57January 17, 202216otherTypeScript
This is the directive for @agm/core (not official)
2 years ago8JavaScript
TiBot — The Date and Time Bot
Googlemaps Angular644
5 years ago8TypeScript
Integrating Google Maps with Angular 6
Ionic3 Firebase Authentication Geofire Geolocation43
6 years agon,ullJavaScript
This is a sample project that handles complete user authentication with firebase and geolocation with geofire. Just clone it and start building your app from there
Alternatives To Map
Select To Compare

Alternative Project Comparisons


Build Status Join the chat at

Angular2 Google Map (ng-map version 2)

If you like this, you may also like these;

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 NguiMapModule 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';
       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) {

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. Its required to be open-minded and interested in helping others. You can contribute to the following;

  • Updating
  • 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, 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 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
$ 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)
Popular Angular Projects
Popular Google Maps Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Google Maps