angular-gmaps v1.0.0
Angular Gmaps
Angular Gmaps is a library that make google maps integration easier with angular
Getting started
Import angular gmaps module into your app's module:
import {NgModule} from '@angular/core';
import {DrappMapsModule, AgGeocodeApiService} from 'angular-gmaps';
@NgModule({
imports: [DrappMapsModule.forRoot({
apiKey: '<MAPS_API_KEY>',
apiUrl: '<MAPS_API_URL>'
)],
providers: [
// You can provide here a different service for google autocomplete locations
{ provide: FORM_GEOCODE_AUTOCOMPLETE, useClass: AgGeocodeApiService }
]
})
export class AppModule{}
Finally connect the component in template:
<ag-drapp-maps #agMap [darkMode]="true" [center]="{ lat: 0.00, lng: 0.00 }">
<ag-markers-list>
<ag-map-marker #ag-marker
[showInfo]="true"
[active]="true"
[animation]="0"
[label]="{ text: 'D', color: 'white' }"
[position]="{ lat: 3.00, lng: 3.00 }">
<ag-info-window [title]="'window title'" [content]="'hellow world'">
<p>more content</p>
</ag-info-window>
</ag-map-marker>
<ag-draw-direction [start]="startLocation"
[end]="endLocation">
</ag-draw-direction>
</ag-markers-list>
</ag-drapp-maps>
Documentation
API reference for Angular Gmaps
import { DrappMapsModule } from 'angular-gmaps';
AgMapsComponent
Component responsible for managing the map
Selector: ag-drapp-maps
Properties
Name | Description |
---|
| @Input() darkMode: boolean| If is set to true the maps will have the dark mode styles applied. Default is false | | @Input() center: MapCoordinates| Map coordinates object "{ lat: 0.00, lng: 0.00 }" | | @Input() zoom: number| Maps zoom as a number. Default is "12" | @Input() zoomControl: boolean| Boolean flag which enables zooming buttons on the map | | @Input() zoomControlOptions : object | Zoom default configuration Default: "{ style: 1, position: 9 }"| | @Input() disableDefaultUI: boolean | Disable google maps default UI option. Default is 'true' | | @Input() mapTypeId: MapTypeEnum | Map types, choose one of ('roadmap', 'hybrid', 'satellite', 'terrain'). Default is 'roadmap' |
AgMapMarkerComponent
Component responsible for managing the map markers
Selector: ag-map-marker
Properties
Name | Description |
---|
| @Input() draggable: boolean| Ability to move the marker on the map. Default is false | | @Input() position: MapCoordinates| Map coordinates object "{ lat: 0.00, lng: 0.00 }" | | @Input() label: string | Marker label | @Input() animation: number| Google maps supported animations. Default is 2| | @Input() icon: MarkerIcon or MarkerPath | Icon url to render instead of the default icons for markers| | @Input() active: boolean | Flag to enable or disable the marker | | @Input() showInfo: boolean| Enable or disable info tooltip when clicking the marker |
AgDrawDirectionComponent
Component responsible for managing the directions between two points on the map
Selector: ag-draw-direction
Properties
Name | Description |
---|
| @Input() start: MapCoordinates| Map coordinates object "{ lat: 0.00, lng: 0.00 }" | | @Input() end: MapCoordinates| Map coordinates object "{ lat: 0.00, lng: 0.00 }" | | @Input() waypoints: AgWayPoints[] | Array of coordinates for stop points { location: AgCoordinates, stopover: boolean }|
AgInfoWindowComponent
Component responsible for managing the tooltip for markers on the map
Selector: ag-info-window
Properties
Name | Description |
---|
| @Input() title: string| Tooltip title | | @Input() content: string| Tooltip content| | @ViewChild() customContent: ElementRef | Custom content of the tooltip (template/component etc)|
Development
Prepare your environment
Install local dev dependencies: npm install
while current directory is this repo.
Development server
Run npm start
to start a development server on a port 4200.
Open http//:localhost:4200
on your browser.
Tests
Run npm test
to run tests once or npm run test:watch
to continually run tests.
License
MIT