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.

$3

#### NPM

``shell
npm install --save @eqproject/eqp-maps
`

$3

#### Import the EqpMapsModule:

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

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

#### Add Google Maps script in index.html:

`html

`

---

API

$3

| 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. |

$3

| 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

$3

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

`html


`

CASE 2: Handler on event set form value

`html
[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)">

`

`ts
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: info@eqproject.it