Skip to content

Latest commit

 

History

History
130 lines (98 loc) · 6.43 KB

README.md

File metadata and controls

130 lines (98 loc) · 6.43 KB
Raw

Google Map Drawing Controls for Angular (NgxGoogleMapHelper)

Build Status NpmVersion Downloads Fork

Version 2 supports Angular 12

An angular package for using drawing control options of Google Map API. It provides following features,

  • Google Map API Drawing Controls (Marker, Rectangle, Polyline, Polygon, Circle)
  • Custom Buttons (Save, Undo, Delete...)
  • Output Events (OverlayCompleted, MapClicked..)

You can check it online through here NGXGoogleMapHelperDemo

Installation

Install using npm,

$ npm install ngx-google-map-helper --save

Usage

Import

Add NgxGoogleMapHelperModule to your module file:

imports: [
    ... , //your modules
    NgxGoogleMapHelperModule.forRoot({
      apiKey: 'XXXXXXXXXXXXXXXXXXXXXX'
    })
  ]

Example

Refer to main app in this repository for working example. Or this Stackblitz Demo (Please change the API Key with your key in app.module , If the map is not loaded please try - Open In New Window option.)

After importing NgxGoogleMapHelperModule in your module file just use the ngx-google-map-helper component as below,

<ngx-google-map-helper 
    [locationAccess] = true 
    [showControl] = true 
    [mapHeight] = "'1000px'" 
    [mapWidth] = "'50%'"> </ngx-google-map-helper>

Options

You can go through Google Map API here. Google Map Javscript API

Option Type Description Values Default
mapHeight string Sets the height of the map '100px','100%'... '500px'
mapWidth string Sets the width of the map '100px','100%'... '100%'
zoom int Sets the zoom of map any number 10
center LatLang Sets the center of map object of LatLang {lat: -34.397, lng: 150.644}
mapType string Sets the type of map ['ROADMAP', 'SATELLITE', 'HYBRID', 'TERRAIN'] 'ROADMAP'
showErrors boolean Shows custom error messages on console true,false true
locationAccess boolean Allow to get the location of the user true,false true
placeMarkerOnClick boolean Places a marker on map in every click true,false false
showControl boolean Shows google map drawing controls true,false true
position string Sets the location of drawing tools.Refer drawing tools positions of Google Map API. 'TOP_CENTER' , 'TOP_RIGHT' , 'BOTTOM_LEFT',... 'TOP_CENTER'
showModes string[] Shows only specified drawing controls. When null shows all. 'marker' , 'circle' , 'polygon' , 'polyline' , 'rectangle' All
commonOption OverLayOption Sets the properties of all drawing options. object of OverLayOption {fillColor:'#005696' ,fillOpacity:0.2, strokeColor:'#005696' ,strokeWeight:3, clickable:true, editable:true, draggable:true,zIndex:1}
circleOption OverLayOption Overrides only the circle overlay properties. object of OverLayOption same as common option default
polygonOption OverLayOption Overrides only the polygon overlay properties. object of OverLayOption same as common option default
polylineOption OverLayOption Overrides only the polyline overlay properties. object of OverLayOption same as common option default
rectangleOption OverLayOption Overrides only the rectangle overlay properties. object of OverLayOption same as common option default
markerOption MarkerOption Overrides only the marker properties. object of MarkerOption {animation: 'DROP',draggable: true,title: '',icon: null}
customButtons boolean Shows custom buttons - Undo,Save,Clear ... true,false true
onlyCustomButtons string[] Shows only the specified custom buttons.By default shows all. 'undo','clear','delete', 'save','saveAll' All
googleMapObjects boolean If true, returns google map objects rather than custom objects. true,false false
shapes Shape[] Pass overlays as a shape object to show the overlay on map Shape objects []

Events

Please note that this events return shape objects only when googleMapObjects = true (by default true), if its false it will return google map event.

Event Description Output
mapClicked Event fires when user click on the map. LatLng Object
overlayCompleted Event fires as soon as overlay drawing is finished. Shape Object
overlaySelected Event fires when an overlay is selected Shape Object
saveSeleted Event fires when save custom button is clicked. Shape Object
saveAll Event fires when saveAll custom button is clicked. Array of Shape Objects

Versions

Version Angular Version
V 1.* Angular 7
V 2.* Angular 12

Development

Want to contribute?

  • Fork repository.
  • Update ./projects/ngx-google-map-helper
  • Build & Test the library.
  • Update ./src/app with new functionality.
  • Update README.md accordingly.
  • Pull request.
Instructions
  • Download or clone the repository.
  • Install dependencies $ npm install
  • Start the app $ npm start
  • Build the app $ npm run build or $ ng build
  • Build the library after change run either $ npm run package or $ ng build NgxGoogleMapHelper

verify app is working after $ npm start ,

http://localhost:4200

License

MIT Free Software