Share with
How to add autosearch google map places or location search bar into angular framework project
Here we use google auto search find location or places using search bar and display location marker into google map in angular application.
Google Auto Find Location or Place Search Bar
Google map is used to search location or places. Here we are going to add google map into angular framework for integrate google map in application. Using auto search google places bar we are finding location or place and select location to add marker into google map.
Prerequisite
- Node JS. To install node js please click here.
- Angular CLI to install angular cli in your system follow this article.
- Bootstrap 4. to install bootstrap click here.
- Install Google Maps i.e. @Agm/Core. to add google map using article click here.
Example for Add Location/ Places Search Bar
Into previous article we are learn how to add google map into angular app. If you do not see how we implement google map into angular app. Please read this article.
Add google maps with add marker getting current location using @agm/core module in angular framework
Follow this article to install google map and integrate simple google map into your angular app.
In Previous tutorial we seen google map template using getting current location into angular app like this
HTML Code
// src > app > app.component.html
<div class="googlemap"><!-- app.component.html --><agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom"><agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker></agm-map>
</div>
CSS Code
// src > app > app.component.css
agm-map {
height: 500px;
}
.googlemap{
margin-top: 5%;
}
TS Code
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
title: string = 'Google Map Project';
latitude: number;
longitude: number;
zoom:number;
ngOnInit() {
this.setCurrentLocation();
}
// Get Current Location Coordinates
private setCurrentLocation() {
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.zoom = 15;
});
}
}
}
This will helps you to set marker into google map to your current location.
Now we add location or place search bar to search place by adding first keyword.
1) Install GoogleMaps types library
npm install @types/googlemaps --save-dev
2) Add googlemaps in types array list into tsconfig.app.json file already available into at the project directory
// projectname < tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": [
"googlemaps"
]
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
3) You need to activate some services in google api i.e. Maps JavaScript API (Show Map), Places API (Places search results) & Geocoding API (Convert Lat & Long to address)
4) Now add search bar to HTML file
// src > app > app.component.html
<!-- app.component.html -->
<div class="googlemap container">
<h1>Angular Google Maps with Places Search Example</h1>
<div class="form-group">
<label>Enter address</label>
<input type="text" class="form-control" (keydown.enter)="$event.preventDefault()"
placeholder="Search Nearest Location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" #search>
</div>
<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
<agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true"
(dragEnd)="markerDragEnd($event)"></agm-marker>
</agm-map>
<br>
<h5>Address: {{address}}</h5>
<div>Latitude: {{latitude}}</div>
<div>Longitude: {{longitude}}</div>
</div>
#search is autocomplete google place search bar activate api
keydown.enter is used to get keys when pressed so #search will send this keyword to google place search api to find location
5) Add the TS code into component.ts file
import { Component, OnInit, ViewChild, ElementRef, NgZone } from "@angular/core";
import { MouseEvent, MapsAPILoader } from '@agm/core';
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
title: string = 'Google Map Project';
latitude: number;
longitude: number;
zoom: number;
address: string;
private geoCoder;
@ViewChild('search',{static: false})
public searchElementRef: ElementRef;
constructor(
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone
) { }
ngOnInit() {
//load Places Autocomplete
this.mapsAPILoader.load().then(() => {
this.setCurrentLocation();
this.geoCoder = new google.maps.Geocoder;
let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
types: ["address"]
});
autocomplete.addListener("place_changed", () => {
this.ngZone.run(() => {
//get the place result
let place: google.maps.places.PlaceResult = autocomplete.getPlace();
//verify result
if (place.geometry === undefined || place.geometry === null) {
return;
}
//set latitude, longitude and zoom
this.latitude = place.geometry.location.lat();
this.longitude = place.geometry.location.lng();
this.zoom = 12;
});
});
});
}
// Get Current Location Coordinates
private setCurrentLocation() {
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.zoom = 8;
this.getAddress(this.latitude, this.longitude);
});
}
}
markerDragEnd($event: MouseEvent) {
console.log($event);
this.latitude = $event.coords.lat;
this.longitude = $event.coords.lng;
this.getAddress(this.latitude, this.longitude);
}
getAddress(latitude, longitude) {
this.geoCoder.geocode({ 'location': { lat: latitude, lng: longitude } }, (results, status) => {
console.log(results);
console.log(status);
if (status === 'OK') {
if (results[0]) {
this.zoom = 12;
this.address = results[0].formatted_address;
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
}
This code will activate the google auto search api to get the list synchronously when you add the keyword.
Output
Leave a reply

Sign in to stay updated on your professional world.
Pro Code Programming
Share and learn to code!
Programming articles, which helps you to build your application.
If something you are stuck to code and complete the program, just find here your quetion related articles.
New to Pro Code Programming?