Angular 2/4/6/8 Google Map

Angular 2+ Google Map Component.

Getting Started

Installation

• 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="http://maps.googleapis.com/maps/api/js?key=<API_KEY>"> </script> 

to your index.html file head tag

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

Usage

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

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

@NgModule({
  // ...
  imports: [
    AngularGoogleMapModule,
    CommonModule
  ]
  // ...
})

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
    }]
  }

Properties

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/

License

MIT License.