ngconf-googlemap v1.0.2

ngconf-googlemaps

This project was generated with Angular CLI version 11.0.2.

Google Map API Integration

Demo Link

Stackblitz Demo

Step - 1

npm i ngconf-googlemap --save
NPM Package Link

import NgconfGooglemapModule in app.module.ts file.
app.module.ts

import { NgconfGooglemapModule } from 'ngconf-googlemap';
 imports: [
    NgconfGooglemapModule
  ]

Step - 2

Declare options object in app.component.ts file for customization. app.component.ts

  options: any = {
   mapHeight: "500px",
   mapWidth: "100%",
   initialPointer: true,
   mode: "CLICK",
   lat: 28.5355,
   long: 77.3910
 };
 
 onMarkerUpdate(event:any){
     console.log(event);
 }

app.component.html In your template use the component selecter and call as followed. That's it you have successfully integrated Google Maps in your project.

<ngconf-googlemap (latlong)="onMarkerUpdate($event)"
API_KEY="YOUR_GOOGLE_MAP_API_KEY" [options]="options" ></ngconf-googlemap>

Output Event (latlong)

This event is emitted when you use the component in CLICK mode where user is allowed to make pointers on the map. So when ever user makes a point on the map that coordinates can be accessed using latlong event.

// OUTPUT Format of the latlong event for reference
{
          lat: 28.06,
          long: 32.96
}

Options Available

Here is the Object Interface that has to be followed for Options configuration.
MODE: CLICK or VIEW In CLICK mode user can click on the map and create map pointer. In VIEW mode user can only see the map but cannot perform any operation on it.

export interface options {
  mode: string, // CLICK or VIEW
  initialPointer: Boolean // true or false
  lat: any, // Latitude
  long: any, // Longitude
  mapHeight: string, // Height in px or % or any CSS unit
  mapWidth: string, // Width in px or % or any CSS unit
}
/* 
Default Options if options is not given to the component
 options: any = {
    mapHeight: "500px",
    mapWidth: "100%",
    initialPointer: false,
    mode: "CLICK",
    lat: 28.5355,
    long: 77.3910
 };
*/

That's it you are good to go. Happy Coding :)