How to integrate GoogleMap in Angular with search text box, get the complete addresswith coordinates
Posted By : Parveen Kumar Yadav | 30-Dec-2015
For integrated the google map just made a controller lets say GoogleMapController
staticApp.controller("googlemapController", ["$scope", "$rootScope", "$log", "$location", "$document", "$timeout", "dataTransferService", function ($scope, $rootScope, $log, $location, $document, $timeout, dataTransferService) {
var self = this;
var infoWindow;
var map;
$scope.init = function() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
if(document.getElementById('pac-input')!=null){
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
});
var markers = [];
var triggerMapSearch = function () {
setTimeout(function () {
var input = document.getElementById('pac-input');
google.maps.event.trigger(input, 'focus')
google.maps.event.trigger(input, 'keydown', {
keyCode: 13
});
}, 100);
}
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return
}
//Getting latitude and longitude
var location = places[0].geometry.location;
var lat = location.lat();
var lng = location.lng();
})
$rootScope.$on("test", triggerMapSearch);
$timeout(function () {
google.maps.event.trigger(map, 'resize');
//map.setCenter(myLatLng);
})
}
}
$scope.init();
}])
In variable places you will get an Object of complete address from which you can get the formatted address i.e the address contain city name state name and country name and other things if user enter in search box .
You will also gets the coordinates i.e latitude and longitude as above.
In html side you need to add simple div
You also need to add script of GoogleAPI in your index.html files or any files from where your JS files are loaded
src="http://maps.google.com/maps/api/js?key=AIzaSyAgr_4f8TdZib6MNZKZIMo-ZuL0HOZOhc0&sensor=true&libraries=places&language=en-US"
In this there is key we are using this the browser key need to access Google API you can generate a new one or this will also work fine.
For showing location in Map please read my next Blog on this.
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Parveen Kumar Yadav
Parveen is an experienced Java Developer working on Java, J2EE, Spring, Hibernate, Grails ,Node.js,Meteor,Blaze, Neo4j, MongoDB, Wowza Streaming Server,FFMPEG,Video transcoding,Amazon web services, AngularJs, javascript. He likes to learn new technologies