ngx-cg-google-maps v0.0.2

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.