Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ng2-ui/map
Angular Google Maps Directives
https://github.com/ng2-ui/map
angular google-maps ng-map
Last synced: about 1 month ago
JSON representation
Angular Google Maps Directives
- Host: GitHub
- URL: https://github.com/ng2-ui/map
- Owner: ng2-ui
- Created: 2016-02-28T21:51:13.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-03-21T13:29:35.000Z (over 2 years ago)
- Last Synced: 2024-05-22T04:27:47.614Z (7 months ago)
- Topics: angular, google-maps, ng-map
- Language: TypeScript
- Homepage: https://ng2-ui.github.io/map
- Size: 9.98 MB
- Stars: 258
- Watchers: 24
- Forks: 98
- Open Issues: 49
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-angular-components - ng2-map - Angular2 Google Maps Directives. (Uncategorized / Uncategorized)
- awesome-angular - ng-ui-map - Angular Google Maps Directives. (Uncategorized / Uncategorized)
- awesome-angular-components - ng2-ui/map - Angular Google Maps Directives (UI Components / Map)
README
# map
[](https://travis-ci.org/ng2-ui/map)
[](https://gitter.im/ng2-ui/map?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
Angular2 Google Map ([ng-map](https://ngmap.github.io) version 2)
* **[](https://ng2-ui.github.io/map/)**
* [Plunker Example](https://plnkr.co/edit/6e1qWK?p=preview)
* [Place Auto Complete Plunker Example](https://plnkr.co/edit/AT3fxW?p=preview)
If you like this, you may also like these;
* [ng-map](https://github.com/allenhwkim/angularjs-google-maps) Google Maps Wrapper for Angular 1.*
* [react-openlayers](https://github.com/allenhwkim/react-openlayers) React + OpenLayers
* [geo-coder](https://github.com/allenhwkim/geocoder) 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 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
```
```
or,
```
```
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.
```HTML
```
In your app component:
```TypeScript
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)