# ngx-google-map

> ngx-google-map is a angular 4 and above component for angular apps.

Latest version **1.0.0** (published 2018-04-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-google-map
pnpm add ngx-google-map
yarn add ngx-google-map
bun add ngx-google-map
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-04-28 |
| First published | 2018-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 140.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Manish Kumar |
| Maintainers | manishjanky |
| Keywords | angular, angular4, aot-compatible, library, ng, ngx, googlemaps, google, maps, google-map, typescript |

## Links

- npm: https://www.npmjs.com/package/ngx-google-map
- Repository: https://github.com/manishjanky/ngx-google-map
- Homepage: https://github.com/manishjanky/ngx-google-map#readme
- Issues: https://github.com/manishjanky/ngx-google-map/issues
- npm.io page: https://npm.io/package/ngx-google-map

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-04-28
- 0.0.0 (beta) — 2018-04-22

## README

# ngx-google-map

[![GitHub license](https://img.shields.io/github/license/manishjanky/ngx-google-map.svg)](https://github.com/me-and/mdf/blob/master/LICENSE)
[![npm](https://img.shields.io/npm/v/ngx-google-map.svg)]()
[![Build Status](https://travis-ci.org/manishjanky/ngx-google-map.svg?branch=master)](https://travis-ci.org/manishjanky/ngx-google-map)
[![npm](https://img.shields.io/npm/dt/ngx-google-map.svg)]()
[![GitHub issues](https://img.shields.io/github/issues/manishjanky/ngx-google-map.svg)]()
[![GitHub closed issues](https://img.shields.io/github/issues-closed/manishjanky/ngx-google-map.svg)]()
[![GitHub contributors](https://img.shields.io/github/contributors/manishjanky/ngx-google-map.svg)]()

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

## Examples

* [demo-page](https://manishjanky.github.io/ngx-google-map-demo/)

## 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](https://github.com/manishjanky/ngx-google-map/issues) here on GitHub.

## Contributing to this project

Anyone and everyone is welcome to contribute. Please take a moment to
review the [guidelines for contributing](CONTRIBUTING.md).

* [Bug reports](CONTRIBUTING.md#bugs)
* [Feature requests](CONTRIBUTING.md#features)
* [Pull requests](CONTRIBUTING.md#pull-requests)

---
_Source: https://npm.io/package/ngx-google-map · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._