Eqp Maps

Table of contents

• Getting started
• API
• Use cases
• Credits

Required

• [x] Angular Material installed and imported
• [x] @angular/google-maps installed and configured
• [x] Google Maps JavaScript API key enabled
• [x] @eqproject/eqp-common (for error dialog service)

Getting started

This package provides an Angular component that wraps Google Maps with built-in functionalities such as:

• Address search with Google Places Autocomplete
• Interactive marker placement by clicking on the map
• Automatic synchronization of address, latitude, and longitude with parent form controls
• Optional display of lat/lng values
• Current location detection (via browser geolocation API)

Notes

This component only provides the UI and integration with Google Maps. You must configure your own Google Maps API key in your Angular project.

Step 1: Install eqp-maps:

NPM

npm install --save @eqproject/eqp-maps

Step 2:

Import the EqpMapsModule:

import { EqpMapsModule } from "@eqproject/eqp-maps";

@NgModule({
  declarations: [AppComponent],
  imports: [EqpMapsModule, GoogleMapsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Add Google Maps script in index.html:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

API

Inputs

| Input | Type | Default | Required | Description | | -------------------------- | -------------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------- | | [zoom] | number | 12 | no | Initial zoom level of the map. | | [mapHeight] | string | "400px" | no | Height of the map container. | | [mapWidth] | string | "100%" | no | Width of the map container. | | [center] | google.maps.LatLng | new google.maps.LatLng(41.9028, 12.4964) | no | Initial center of the map (default: Rome). | | [isLatLngVisible] | boolean | false | no | If TRUE, shows latitude and longitude below the address input (for debug). | | [isCurrentPositionVisible] | boolean | false | no | If TRUE, shows a button to retrieve the current location. | | [addressForm] | AbstractControl | null | yes | FormControl bound to the address field in the parent form. Automatically updated when the user selects/clicks on the map. | | [latForm] | AbstractControl | null | yes | FormControl bound to the latitude field in the parent form. Automatically updated when the marker changes position. | | [lngForm] | AbstractControl | null | yes | FormControl bound to the longitude field in the parent form. Automatically updated when the marker changes position. | | [placeholderAddress] | string | "Enter address" | no | Placeholder text for the address input. | | [placeholderLocation] | string | "Use my location" | no | Label for the button that retrieves the current location. |

Outputs

| Output | Event Arguments | Required | Description | | ---------------- | ----------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------- | | (onSetFormValue) | { address: string, lat: number, lng: number } | no | Emitted when the form values are updated (after clicking on the map, searching an address, or retrieving current location). |

Use cases

Use Example in template:

CASE 1: Basic usage with address, latitude, and longitude bound to a form

<eqp-maps [addressForm]="form.controls['address']" [latForm]="form.controls['lat']" [lngForm]="form.controls['lng']">
</eqp-maps>

CASE 2: Handler on event set form value

<eqp-maps
  [zoom]="14"
  [mapHeight]="'500px'"
  [mapWidth]="'100%'"
  [isLatLngVisible]="true"
  [isCurrentPositionVisible]="true"
  [addressForm]="form.controls['address']"
  [latForm]="form.controls['lat']"
  [lngForm]="form.controls['lng']"
  placeholderAddress="Search address"
  placeholderLocation="Locate me"
  (onSetFormValue)="onMapUpdate($event)">
</eqp-maps>

form = this.fb.group({
  address: [''],
  lat: [''],
  lng: ['']
});

onMapUpdate(event: any) {
  console.log('Updated from map:', event);
}

Credits

This library has been developed by EqProject SRL, for more info contact: [email protected]