Map

ngx-cg-google-maps

npm version License: MIT

Google Maps library for Angular (ngx-cg-google-maps) is a lightweight Angular library that simplifies the integration of Google Maps into Angular applications.

Installation Install ngx-cg-google-maps along with its dependencies:

bash npm install ngx-cg-google-maps @googlemaps/js-api-loader @types/google.maps

Usage

1. Import the CgMapModule

Import the CgMapModule into your Angular module:

2. And import style assets file link in angular.json. { "projects": { "my-project": { "architect": { "build": { "options": { "styles": [ "node_modules/ngx-cg-google-maps/src/assets/css/styles.scss" ] } } } } } }

typescript

import { CgMapModule } from 'ngx-cg-google-maps';

@NgModule({

declarations: [/* your components here */],

imports: [CgMapModule],

})

export class YourModule {}

3. Add API Key

Add your Google Maps API key in your Angular app's environment:

typescript // environment.ts or environment.prod.ts

export const environment = {

production: false,

googleMapsApiKey: 'YOUR_API_KEY',

};

4. Configure NgxCgGoogleMapsService

   In your Angular component or service, configure the CgMapService:

   typescript

   import { CgMapService } from 'ngx-cg-google-maps';

   import { environment } from 'src/environments/environment';

   // Inside your component or service

   constructor(private mapService: CgMapService) {

    this.mapservice.initMap( {
      key:  environment.googleMapsApiKey,
      center: { lat: 10.994011, lng: -74.817025 },
      zoom: 11,
      inclination:45, //optional
      grado:2 //optional
    });

   }

   OnInit(){

   //crear un marcado basico

    const markers: Marker[] = [];
   
    for (let index = 0; index < 20; index++) {
       
      markers.push({
         
       //posicion del marcador
        marker: { lat: 10.994011 + index / 10, lng: -74.817025 + index / 10 },
   
        //informacion del marcador
        info: this.infoMarket(),
   
        //crear marcadores basicos personalizados
        content: {
          color: '#FBBC04',
          size: 1,
          borderColor: 'blue',
          pointColor: 'red',
        },
   
      });
   
    }
   
    this.markers = markers;
   
    //agrega los marcadores al mapa
   
    this.mapservice.setMarker(this.markers);
    // elimina los marcadores del mapa
    //this.mapservice.removeMarker();
   
   
    //crear un marcado html
    const markersHtml: MarkerHtml[] = [];
   
    for (let index = 0; index < 20; index++) {
       
      markersHtml.push({
         
        //posicion del marcador
        marker: { lat: 10.994011 + index / 10, lng: -74.817025 + index / 10 },
   
        //requerido
        icon:'../assets/airplane-engines.svg',
   
        //contenido html del marcador 
        content: this.contentMarkerHtml(),
   
      });
    }
   
    this.markersHtml=markersHtml;
   
    //agrega los marcadores al mapa.
    // this.mapservice.setMarkerHtml(this.markersHtml);
   
    // elimina los marcadores del mapa
    // this.mapservice.removeMarkerHtml()
   
   
    const coordenadas:LatLng[]=[]
   
    for (let index = 0; index < 20; index++) {
       
      coordenadas.push( { lat: 10.994011 + index / 10, lng: -74.817025 + index / 10 });
    }
   
    this.dataPoliline = {
       
      coordenates:coordenadas,
   
      color: 'blue',
   
      strokeOpacity: 2,
   
      strokeWeight: 4,
   
      markers: {
         
        color: 'white',
   
        borderColor: 'red',
   
        size: 3,
   
        borderSize: 3,
   
      },
    };
   
    // agrega ruta al mapa
    this.mapservice.setline(this.dataPoliline);
   
    //remove linea del mapa
    //  this.mapservice.removeLine();

   }

   infoMarket() { return <div class="icon"> <i aria-hidden="true" class="fa fa-icon fa-{property.type}" title="{property.type}"></i> <span class="fa-sr-only">{property.type}</span> </div> <div class="details"> <div class="price">{property.price}</div> <div class="address">{property.address}</div> <div class="features"> <div> <i aria-hidden="true" class="fa fa-bed fa-lg bed" title="bedroom"></i> <span class="fa-sr-only">bedroom</span> <span>{property.bed}</span> </div> <div> <i aria-hidden="true" class="fa fa-bath fa-lg bath" title="bathroom"></i> <span class="fa-sr-only">bathroom</span> <span>{property.bath}</span> </div> <div> <i aria-hidden="true" class="fa fa-ruler fa-lg size" title="size"></i> <span class="fa-sr-only">size</span> <span>{property.size} ft<sup>2</sup></span> </div> </div> </div>; }

contentMarkerHtml() { return <div class="details"> <div class="price">{property.price}</div> <div class="address">{property.address}</div> <div class="features"> <div> <i aria-hidden="true" class="fa fa-bed fa-lg bed" title="bedroom"></i> <span class="fa-sr-only">bedroom</span> <span>{property.bed}</span> </div> <div> <i aria-hidden="true" class="fa fa-bath fa-lg bath" title="bathroom"><i> <span class="fa-sr-only">bathroom</span> <span>{property.bath}</span> </div> <div> <i aria-hidden="true" class="fa fa-ruler fa-lg size" title="size"></i> <span class="fa-sr-only">size</span> <span>{property.size} ft<sup>2</sup></span> </div> </div> </div>; }

coordenadas(e: { coordenates: LatLng[]; marker: LatLng }) { console.log(e); }

removeLastLine(e:{ coordenates: LatLng[]; marker: LatLng }){ console.log(e); }

addMarker(e: any) { console.log(e); }

removeMarker(e:any){ console.log(e); }

5. Use NgxCgGoogleMapsComponent In your Angular component's template, use the NgxCgGoogleMapsComponent:

   html

   or initialize using HTML:

   html <cg-map [key]="key" [center]="{ lat: 10.994011, lng: -74.817025 }" [grado]="20" [createRoute]="true" [editable]="true" [addMarker]="true" [dataMarker]="markers" [dataMarkerHtml]="markersHtml" [dataPoliline]="dataPoliline" [editable]="true" (clicked)="coordenadas($event)" (clickedRight)="removeLastLine($event)" (markerAdd)="addMarker($event)" (markerRemove)="removeMarker($event)"

Note: Make sure to replace 'YOUR_API_KEY' with your actual Google Maps API key.

Now, when users install ngx-cg-google-maps, the specified dependencies (@googlemaps/js-api-loader and @types/google.maps) will be installed automatically. Users can then import and use your library without having to separately install these dependencies.