Javascript Angular Google Map Autocomplete Api not working

Question

I'm trying to se the google map api in angular with the following code: HTML:

<div ng-value="initMap()"> 
          <div>
          <input id="pac-input" type="text"
                  value="{{event_foundaddress}}"  ng-model="event_foundaddress"/> <!-- placeholder breaks EVERYTHING!!!! No placeholder!!!-->
          </div>

          <div  id="map" style="width: 300px; height: 400px" > </div>

          <div > Found address: {{event_foundaddress}} </div>
       </div>

JS/angular

$scope.initMap = function() {
    var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: $scope.lat, lng: $scope.long},//london coords
    zoom: 13
  });
  $scope.foundaddress = $localStorage.event.address
  var input = /** @type {!HTMLInputElement} */
      (document.getElementById('pac-input'));
     //$scope.event_foundaddress
  //alert('in:'+input)
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  //var types = document.getElementById('type-selector');
  //map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
  //alert(input)
  var autocomplete = new google.maps.places.Autocomplete(input,{types: ['geocode']});
  autocomplete.bindTo('bounds', map);


  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
  });


  autocomplete.addListener('place_changed', function() {...


  }

I got an error InvalidValueError: not an instance of HTMLInputElement from the var autocomplete = new google.maps.places.Autocomplete(input,{types: ['geocode']});. Apparently input is not a HTMLInputElement. Do you know how to pass through a HTMLInputElement from the dom in angular?

EDIT: putting an alert('input') reveals that the input variable is always null... not sure why?

Naveen · Accepted Answer · 2016-07-30 16:09:39Z

1

I had the same issue, you have to call initMap() on ng-focus of input element. Then it will work.

But the problem even after updating my code, the model wasnt updated. Then I moved to angular-google-places-autocomplete library.

And that library is awesome. Check out https://github.com/kuhnza/angular-google-places-autocomplete

Edit: Answer Updated You just have to write as below, and once you select the location foundaddress will have Google place object, from which you have to extract formatted_address.

<input ng-model="foundaddress" type="text" id="pac-input" g-places-autocomplete></input>

edited Jul 30, 2016 at 16:09

answered Jul 30, 2016 at 15:14

Naveen

83010 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

asasa178 Over a year ago

If I put <input id="pac-input" type="text" ng-focus="initMap()" value="{{event_foundaddress}}" ng-model="event_foundaddress"/>. The code doesn't even load the map

Naveen Over a year ago

Use this, var map = new google.maps.Map(document.getElementById('pac-input') you dint pass the correct id

asasa178 Over a year ago

I don't think the name is the problem: 'map' id is the place where the map is displayed, 'pac-input' is where the autocomplete should perform

asasa178 Over a year ago

I tried also the angular-google-places-autocomplete library but still same error at var autocomplete = new google.maps.places.Autocomplete(input,{types: ['geocode']});

Naveen Over a year ago

I've updated my answer check it out. You dont need to use initMap() if you use angular-google-places-autocomplete library

|

Collectives™ on Stack Overflow

Javascript Angular Google Map Autocomplete Api not working

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related