Angular Google Maps in Modal | Autocomplete & Select Location, Latitude, Longitude, Address

Compatible from Angular 2 to latest version 9

Angular Google Maps package provides fully featured integration of Javascript-based Google Maps in Angular Applications.

Here we will discuss how to:

  1. Install Google Maps and Add API Keys
  2. Add Dynamic Google Maps in a Component
  3. Add Location Search Filter
  4. Draggable Marker
  5. Zoom Control
  6. Get Lattitude and Longitude of Marker Placed

Check the working demo here.

There’s a lot to do 🙂 Let’s get started!

Install Packages

First, we need to install some required packages.

Angular Google Maps Package

To use Google Maps in Angular project, install AGM package by running following NPM command

GoogleMaps types library

For using Google Maps search feature we need to declare google variable for that install @types/googlemaps by running following NPM command

Bootstrap Framework

User can open a modal which will have Google Maps to select a location by using search or marker dragging feature.
To install Bootstrap in Angular project run following NPM command

So here we have successfully installed the required packages, next, we need to import them in App Module.

Create Google Maps Component

In modal, we will show Google maps which in turn will be a separate component. Run the following generate command to create a new component.

Configurations

In the app.module.ts file, we need to import AgmCoreModule for Google Maps and NgbModule for Bootstrap. After that add them in imports array as shown below:

Add GoogleMaps type in the tsconfig.app.json file at the project root. In the "types" array add "googlemaps" as shown below:

Open Google Maps Modal

In the App component we will now add a button to open a bootstrap modal by calling openGoogelMapsModal() method.

 

Using modal a user can select a coordinate with address where marker is placed.

After saving the location the coordinates and address will be returned and assigned to the coordinates object with following properties:

The app.component.ts file will have following code to open the Bootstrap Modal

To use modal, import NgbModal service to call its the open method where we passed GoogleMapsComponent which we created earlier. Optional data can be passed in modal using data object.

Adding Google Maps with Draggable marker and Search for Places

To show a map, add the agm-map with [latitude], [longitude] and [zoom] properties for default location.

For draggable marker add agm-marker wrapped in agm-map.

We will also add an input field to search places with #search template variable to control search events and bind places result set.

Place the final HTML template in google-maps.component.html file

Note: Please add following css in styles.css file to autocomplete search results on modal.

 

Now update the GoogleMapsComponent with Autocomplete places search method which will be called when Modal is initialized.

The MapsAPILoader service imported from @agm/core will call the load method when maps are ready. The setCurrentLocation() will get current latitude and longitude using navigator‘s geolocation service.

The markerDragEnd() method is called when marker is dragged manually by user to fetch coordinates to call getAddress() method fetching address using the Geocoder service.

The saveLocation method will pass current selection of coordinates and address in the NgbActiveModal‘s close to pass them on App component’s results callback.

The final code for google.maps.component.ts file will look like this:

That’s it now you have Google Map component to get location inputs from user from any parent component.

 

 

Leave a Reply

avatar
  Subscribe  
Notify of