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

About Author

Author Image
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

Request for Proposal

Name is required

Comment is required

Sending message..