TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Angular 2/4/6/8 Google Map

npm version

Angular 2+ Google Map Component.

Getting Started


  • 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="<API_KEY>"> </script> 

to your index.html file head tag

  • import AngularGoogleMapModule from the installed package into your module as follows:


Import AngularGoogleMapModule into NgModule in app.module.ts. CommonModule is also required.

import { AngularGoogleMapModule } from 'ang-google-map';
import { CommonModule } from '@angular/common';
  // ...
  imports: [
  // ...

Add the following component tag in you template (no properties)

<ang-google-map [mapSettings]='settings' [width]="'100%'" [height]="'400px'" [padding]="'0'" [margin] ="'0'"></ang-google-map>

Full properties

  settings = {
    zoomValue: 15,
    isGeolocation: false,
    customStyles: [],
    latitude: 40.7128,
    longitude: 74.0060,
    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


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/


MIT License.


DownloadsWeekly Downloads






Unpacked Size

221 kB

Total Files


Last publish


  • itsmeloop