Angular 2/4/6/8 Google Map
Angular 2+ Google Map Component.
Getting Started
Installation
- Google map package is published on the npm Registry.
- Install the package :
npm install ang-google-map --save
-Generate google map api key from google developer site Link
-Once installed Add
<script src="http://maps.googleapis.com/maps/api/js?key=<API_KEY>"> </script>
to your index.html file head tag
- import
AngularGoogleMapModule
from the installed package into your module as follows:
Usage
Import AngularGoogleMapModule
into NgModule
in app.module.ts
. CommonModule
is also required.
;; @
Add the following component tag in you template (no properties)
Full properties
settings = zoomValue: 15 isGeolocation: false customStyles: latitude: 407128 longitude: 740060 enableGestureHandling: 'none' disableDefaultUI: true isSatelliteView: false isZoomControl: true isStreetViewControl: false showPixelAndCoordinates: true address : filed1: 'Bruce wayne' filed2: 'Wayne manor' filed3: '1007 Mountain Drive' filed4: 'Gotham' filed5: 'United States' isDarkTheme: true enableMarker: isEnable: true isDragable: true animation: true clickToggle: true lat: 0 lng: 0 isEnable: true isDragable: true animation: true clickToggle: true lat: 0 lng: 0
Properties
The following list of properties are supported by the component.
Property | Type | Description | Default Value | options |
---|---|---|---|---|
width | String | Width of the map | '100%' | none |
height | String | Height of the map | '400px | none |
padding | String | Padding of the to map | '0' | none |
margin | String | margin of the to map | '0' | none |
zoomValue | Number | Map's initial zoom value | 15 | none |
isGeolocation | Boolean | Take user's location | false | none |
customStyles | Array | Add custom styles to map | [] | style options |
latitude | Number | Latitude of the location | 40.7128 | none |
longitude | Number | Longitude of the location | 74.0060 | none |
enableGestureHandling | String | control zoom, page scrolling | none | cooperative, greedy, details |
disableDefaultUI | Boolean | Enables/disables all default UI. May be overridden individually | true | none |
isSatelliteView | Boolean | Enable Satellite View of the map | false | none |
isZoomControl | Boolean | Enable UI for map zooming option (+ & -) | true | none |
isStreetViewControl | Boolean | The initial enabled/disabled state of the Street View Pegman control | false | none |
showPixelAndCoordinates | Boolean | World coordinates, which reference a point on the map uniquely. | true | none |
address | Object | Show informations | { filed1: 'Bruce wayne', filed2: 'Wayne manor', filed3: '1007 Mountain Drive', filed4: 'Gotham',filed5: 'United States'} | none |
isDarkTheme | Boolean | Enable dark theme | true | none |
enableMarker | Array | Mark places to map | [{ isEnable: true, isDragable: true, animation: true, clickToggle: true, lat: 0, lng: 0 }] | none |
Run locally
- Clone the repository or downlod the .zip,.tar files.
- Run
npm install
- Run
ng serve
for a dev server - Navigate to
http://localhost:4200/
License
MIT License.