ngx-google-map

ngx-google-map an Angular 4 based component for using google maps in your angular app.

Examples

• demo-page

Features

• Click to add marker
• Drag marker to select a location
• Satellite/Map view
• Zoom in / Zoom out
• Search a location
• Toogle fullscreen mode on/off
• Responsive

Installation

• npm install ngx-google-map
• include google maps scripts in your index.html

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry,places"></script>

For webpack and tsc builds/ angular-cli builds

• import NgxGoogleMapModule from ngx-google-map:

import { NgxGoogleMapModule } from 'ngx-google-map'

• add NgxGoogleMapModule to the imports of your NgModule:

@NgModule({
  imports: [
    ...,

    NgxGoogleMapModule
  ],
  ...
})
class YourModule { ... }

• use <ngx-google-map></ngx-google-map> in your templates to add google maps in your view like below

<ngx-google-map [mapType]="'ROADMAP'" [multiplePlaces]="false"></ngx-google-map>

• do not forget to include google maps api in your build process, module or index.html!

Config

Input

• mapType: string - type of map that you want to be created defaults to ROADMAP.
• multiplePlaces: boolean - property whether user can select multiple places on the map defaults to false.

Output

• mapClick: EventEmitter - click event whenever a user clicks on the map anywhere,
• markerClick: EventEmitter - click event when a user clicks on a marker on the map,
• locationSelected: EventEmitter - event whena user selects a location on the map

{
    locations: []: selectedLocations,
}

Changelog

• v1.0.0

Intial release

Help Improve

Found a bug or an issue with this? Open a new issue here on GitHub.

Contributing to this project

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.

• Bug reports
• Feature requests
• Pull requests