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.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

19
Leave a Reply

avatar
12 Comment threads
7 Thread replies
8 Followers
 
Most reacted comment
Hottest comment thread
16 Comment authors
DeependraGurmukhJhorkmanJohannes WinklerJayden 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: […]
})

kuldeep
Guest

i couldn’t resolve , which
you did involve

mohamed
Guest
mohamed

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

Jhorkman
Guest
Jhorkman

@Jolly.exe, you forgotten to install “@types/googlemaps”: “^3.30.4”, in dev-dependencies instead add types in tsconfig file

James
Guest
James

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

Hiimanshu Arora
Guest
Hiimanshu Arora

Hey…I am getting error Uncaught (in promise): TypeError: Cannot read property ‘nativeElement’ of undefined. Help

carlos
Guest
carlos

please sir to the uber animation example give animate MARKER ON GOOGLE MAP WITH CURRENT LOCATION in Angular google Maps

william
Guest
william

tengo un herror aqui :
@ViewChild(‘search’)
public searchElementRef: ElementRef;

y me dice esto al ejecutar ng serve –open

ERROR in src/app/home/map/map.component.ts(18,4): error TS2554: Expected 2 arguments, but got 1.

vinoth kumar
Guest

how to calculate distance between two latitude and longitude points in angular 6

mahesh
Guest
mahesh

will this work in ios

Jayden
Guest
Jayden

Hi Jolly! I’m using this in ionic, and I get an error – cannot read property ‘Autocomplete’ of undefined.

Johannes Winkler
Guest
Johannes Winkler

Hey guys,
does anyone else had the problem of “core.js:7187 ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘maps’ of undefined”?
Currently I get this error and I have absolutely no Idea why.
The error is located in this line: this.geoCoder = new google.maps.Geocoder;
Is there a possibility to download the project?
Thank you in advance and all the best,
Johannes

Gurmukh
Guest

Thanks, working great with Ionic 4

Deependra
Guest
Deependra

Hello,
markerDraggable not working. Please help.

Code-