Google Map Drawing Controls for Angular (NgxGoogleMapHelper)

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