CODEWITHSUNDEEP
angularjsgoogle-mapsgoogle-maps-api-3
Furqan Shaikh
Furqan Shaikh

Reputation: 381

new google.maps.places.PlacesService throwing error

I am writing an angularjs app which uses Google maps and places api. for google maps am using angular-google-maps.js and registering in the application module as:

app.config(function (uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        key: appConfig.placesApiKey,
        v: '3',
        libraries:'weather,geometry,visualization,places'
    });
});

In the controller:

uiGmapGoogleMapApi.then(function (map) {
    $scope.map = { center: { latitude: geocodeObject.latitude, longitude: geocodeObject.longitude }, zoom: 15 };

    var placesService = new google.maps.places.PlacesService(map);
});

Following error is shown in the console when newing the places service object: this.j.getElementsByTagName is not a function at places_impl.js

Since the placesService is null, I cannot make any further calls.

Please provide any help on whats being done incorrectly.

Upvotes: 0

Views: 2737

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59338

You are getting this error since the constructor of google.maps.places.PlacesService class accepts the instance of google.maps.Map class but uiGmapGoogleMapApi provider returns Google Maps API types.

From another hand, uiGmapIsReady service is better suited for initializing google.maps.places.PlacesService class. The map control is not guaranteed to be initialized until the uiGmapIsReady service's promise resolves.

Having said that i would suggest to place the initialization of google.maps.places.PlacesService class into uiGmapIsReady service:

uiGmapIsReady.promise()                    
.then(function(maps) {                 
    var mapControl = $scope.mapControl.getGMap();
    var placesService = new google.maps.places.PlacesService(mapControl);
});

Example

var app = angular.module('app', ['uiGmapgoogle-maps']);

app.config(function (uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        //key: appConfig.placesApiKey,
        v: '3',
        libraries:'weather,geometry,visualization,places'
    });
});

app.controller('MainCtrl', function ($scope, uiGmapGoogleMapApi, uiGmapIsReady) {

     $scope.mapControl = {};

     uiGmapIsReady.promise()                    
    .then(function(maps) {                 
        var mapControl = $scope.mapControl.getGMap();
        var placesService = new google.maps.places.PlacesService(mapControl);
    });
   
    uiGmapGoogleMapApi.then(function (maps) {
        $scope.map = { center: { latitude: 37.78, longitude: -122.41 }, zoom: 15 };
    });

});
.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div ng-app="app">
        <div class="angular-google-map-container" ng-controller="MainCtrl">
            <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" control="mapControl">
            </ui-gmap-google-map>
        </div>
</div>

Another example that demonstrates how to utilize google.maps.places.PlacesService class.

Upvotes: 2

Related Questions