Angular 10|9|8 Google Maps with Places Search and Draggable Marker using Angular Google Maps (@agm/core)

In this Angular tutorial, we are going to learn to use Google Maps with Draggable Marker and Place search bar to get Address and Latitude, Longitude coordinates in Angular 10/9/8/7/6/5/4 project using @agm package.

Embedded Maps can display markers of location or enable visual selection of address or show geographical location reviews etc.

We will learn to add Google Maps in an Angular project. It is done by the use of  Angular Google Maps module. This module makes Adding/ Embedding Google Maps in an Angular project.

Following is the tutorial step by step to make it even easier.

 

Create a new Angular project

We will use Ng CLI commands for making a new project. It is installed by executing below command:

Creating a new Angular project:

Moving inside the project directory:

Run project

 

Install Angular Google Maps

The @agm/core package needs to be installed for using Google Maps in an Angular application.

Following command is to be run to install AGM in Angular

 

Install Types for GoogleMaps

Further, we will be installing GoogleMaps types library:

Now, open file tsconfig.app.json already available at the root, now add "googlemaps" in types array as shown below:

 

Update App Module

After opening the app.module.ts file, the imports array has to be updated after importing AgmCoreModule.

During the import of AgmCoreModule, we need to define our Google Console API Key under apiKey property. Also, we have enabled the ‘places’ library required to make Places search using the search bar.

 

Check the next section to get your API key and enable Maps and places services.

Getting Google API Key

# Step 1: Go to the Google Console portal where you need to signup/ signing with your Google credentials.

# Step 2: Select the project or create a new one. Fill payment details as per the new rules as required. But they provide free credits so you can easily choose for development purposes.

# Step 3: After creating and selecting the project, click on “Create Credentials”>”API Keys”. Then click on the “Restrict Key” button.

# Step 4: Enable¬† “Maps Javascript API” and “Places API”

Make sure to enable three types of API’s services on your key.

Maps JavaScript API (Show Map), Places API (Places search results) & Geocoding API (Convert Lat & Long to address)

Adding Google Maps in Component

We add the <agm-map/> component with binding properties for setting latitude, longitude, zoom, and other configurations for creating a Google Map in the template.

The map will also have a Marker, which is created by adding the <agm-marker/> component.

# Update App Template

Add the AGM template in the App component to show basic Google Map with the current location. Geolocation service is used in the navigator to get current coordinates like longitude & latitude.

# Update Component Class

To get the current position of the user, on component load, we’ll call the navigator.geolocation API service . The setCurrentLocation() method will fetch latitude and longitude to set Google Map to the current location.

Add Map height in app.component.scss

Important Note: Map height is required since the map will not be visible with 0 height without this.

That’s it.

Now, we have a basic Google Map working in the Angular application. Our next step is to add a search bar to search for locations from Google API. Then, a Draggable Marker to get current location address.

Location/ Places Search bar:

Now, we need to add a search bar with address and Latitude & Longitude information in app.component.html .

So now, the user can drag it to the desired location since the marker is now draggable.

[markerDraggable]option is set to true.

(dragEnd)the event will fire to get the address of the current drop.

# Update the App component template

 

# Update Component Class

In app.component.ts we will add Google map Autocomplete method to return address data set.

Geocoder location service will return address based on provided Latitude & Longitude in the method getAddress()

The template reference variable #search on Input field is used to find the key events for fetching addresses based on current location.

The markerDragEnd() method is called after the user stops marker drag to fetch the address of the current marker position.

 

We have to add bootstrap.css in index.html for making it look beautiful.

 

So, we are done with it.

Now, the application $ ng serve --open is ready to be run to see a Google Map with Search Bar to search for places. The marker can be dragged anywhere to get location address with coordinates.

Leave a comment

Your email address will not be published. Required fields are marked *