map
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β
-
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.
-
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β
-
Install node_module
@ngui/map
and typings$ npm install @ngui/map @types/googlemaps --save
-
For SystemJs users only, update
system.config.js
to recognize @ngui/map.map['@ngui/map'] = 'node_modules/@ngui/map/dist/map.umd.js';
-
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';
@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 withmap
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β
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:
- To avoid duplicate work
- 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 tasksnpm start
: Runapp
directory for development usingwebpack-dev-server
with port 9001npm run clean
: Remove dist foldernpm run clean:dist
: Clean up unnecessary dist folder within dist and app directorynpm run lint
: Lint TypeScript codenpm run build:ngc
: build ES modulenpm run build:umd
: Build UMD modulemap.umd.js
npm run build:app
: Buildapp/build/app.js
for runnable examplesnpm run build
: Build all(build:ngc, build:umc, build:app, and clean:dist)