CODEWITHSUNDEEP
google-maps-api-3
Alexandre Mélard
Alexandre Mélard

Reputation: 12649

using google autocomplete api v3

I'm trying to use the Autocomplete api from google in my ember.js App

My view:

import Ember from 'ember';
import autocomplete from '../utils/google-geocoder-autocomplete.js';

export default Ember.View.extend({
  templateName: "mapLocation",
  classNames: ["map-location"],
  autocomplete: function() {
    autocomplete($(".map-location-search-input-2")[0]);
    console.log(autocomplete);
  }.on('didInsertElement')
});

My autocomplete function:

export default function googleGeocoderAutocomplete(input) {
    var autocomplete = google.maps.places.Autocomplete(input);
  return autocomplete;
}

I've added a break in the function, here are the values:

input:

<input class="map-location-search-input-2" type="text">

When calling the Autocomplete, I get that error:

TypeError: this[Lb] is not a function

EDIT NOT A EMBER.JS PROBLEM REMOVING TAG

I've setup a minimal setup to show the problem

source: 

<html>
<head>
  <meta charset="utf-8">
  <title>demo autocomplete</title>
  <meta name="description" content="">
</head>
<body>
<input type="text" id="auto"/>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBb1BipElNZJQPhdkSUdX5DxZpPnQV_D3k"></script>
<script>
    var autocomplete = google.maps.places.Autocomplete(document.getElementById("auto"));
</script>
</body>
</html>

Generated HTML from inspector view:

<html>
<head>
  <meta charset="utf-8">
  <title>demo autocomplete</title>
  <meta name="description" content="">
<script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/maps-api-v3/api/js/20/9/intl/fr_ALL/common.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/maps-api-v3/api/js/20/9/intl/fr_ALL/util.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/maps-api-v3/api/js/20/9/intl/fr_ALL/controls.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/maps-api-v3/api/js/20/9/intl/fr_ALL/places_impl.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/maps-api-v3/api/js/20/9/intl/fr_ALL/stats.js"></script></head>
<body>
<input type="text" id="auto">
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;key=AIzaSyBb1BipElNZJQPhdkSUdX5DxZpPnQV_D3k"></script><script src="https://maps.gstatic.com/maps-api-v3/api/js/20/9/intl/fr_ALL/main.js"></script><script src="https://maps.gstatic.com/maps-api-v3/api/js/20/9/intl/fr_ALL/places.js"></script>
<script>
    var autocomplete = google.maps.places.Autocomplete(document.getElementById("auto"));
</script>
</body>
</html>

Error is same as before:

Uncaught TypeError: this[Lb] is not a function
(anonymous function) @ VM140:1
(anonymous function) @ main.js:16
hg @ main.js:28
(anonymous function) @ VM149:35
Kh.controls @ VM147:170
(anonymous function) @ main.js:39
(anonymous function) @ main.js:27
(anonymous function) @ main.js:27
(anonymous function) @ main.js:27
dg @ main.js:28
$f.(anonymous function).F @ main.js:27
(anonymous function) @ places_impl.js:1

The error comes from the places API so I guess I am loading correctly the service.

Upvotes: 1

Views: 1440

Answers (1)

Alexandre M&#233;lard
Alexandre M&#233;lard

Reputation: 12649

Ok, that one was very dumb...

I forgot the "new" !

var autocomplete = new google.maps.places.Autocomplete(document.getElementById("auto"));

I deserve your wrath

Upvotes: 1

Related Questions