Angular 7/6 | Add Google Maps with Location Search in Angular 2 plus Applications using Angular Google Maps Module (@agm/core) Easily

Supported from Angular 2 to latest version 7

Google maps are used in many applications as a location with visible maps pays an important role to make information more user-friendly. Embedded Maps can display markers of location or enable visual selection of address or show geographical location reviews etc.

In this post, we will add Google Maps in an Angular project using Angular Google Maps module. Adding/ Embedding Google Maps in an Angular project becomes very easy by using this module. Here we will explain step by step tutorial to make it even more easy with a new sample Angular project using latest CLI current version 7.3.8

Let’s get mapped 😛

Check working demo here

Create a new Angular project. You can update Angular CLI by running following npm command

Install Angular Google Maps 

Run following NPM command to install AGM in project

Next, open app.module.ts then import AgmCoreModule then add in imports array

Note: Replace apiKey with your API key. Check here on How to get Google API key?

Add AGM template in App component to show basic Google Map with the current location. To get current coordinates like Longitude & Lattitude, we will use geolocation service in the navigator.

Here we will call setCurrentLocation() method to set AGM with Lattitude & Longitude.

[zoom] property can be used to zoom up to any level.

Add Map height in app.component.css

Note: Map height is required. Without it, the map will not be visible with 0 height.

That’s it now you have a basic Google Map working in Angular application. Next, we will add a search bar to search for locations from Google API. Then a Draggable Marker to get current location address.

Add Location/ Places Search bar

Next, we will install GoogleMaps types library

Next, open file tsconfig.app.json already available at the root, now add “googlemaps” in types array as shown below

Make sure you have enabled 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)

In app.component.html we will now add a search bar with address and Latitude & Longitude information.

The marker is now draggable so that user can drag it to the desired location.

[markerDraggable] option is set to true.

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

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()

For making it look beautiful we have added bootstrap.css in index.html

 

Check working demo here

That’s it! Run application $ ng serve --open to see a Google Map with Search Bar to search places. The marker can be dragged anywhere to get location address with coordinates.

6
Leave a Reply

avatar
3 Comment threads
3 Thread replies
6 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
JamesJolly.exemohamedAhmad DeedatFarhan Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Farhan
Guest
Farhan

my search bar is not functioning, help

Ahmad Deedat
Guest
Ahmad Deedat

i solved it by add ( language: ‘en’,
libraries: [‘geometry’, ‘places’]) at app.module:

@NgModule({
declarations: […],
imports: […,
AgmCoreModule.forRoot({
clientId: ”,
//apiVersion: ‘xxx’, // optional
//channel: ‘yyy’, // optional
//apiKey: ‘zzz’, // optional
language: ‘en’,
libraries: [‘geometry’, ‘places’]
})
],
providers: […],
bootstrap: […]
})

mohamed
Guest
mohamed

the search bar dont work and get err in ts can not find name google

James
Guest
James

How to make the search bar give suggestion on places rather than addresses?