Google places library undefined

0
votes

I am new to ionic and was trying auto complete search option of google maps api.

After reading so many articles embedded the below code

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&v=3.exp&libraries=places‌​&sensor=false"></script>

and using the library like

var searchBox = new google.maps.places.SearchBox(input);

But it is throwing below undefined errors

ERROR TypeError: Cannot read property 'SearchBox' of undefined at MapPage.push../src/app/components/map/map.page.ts.MapPage.initAutocomplete (map.page.ts:173) at MapPage.push../src/app/components/map/map.page.ts.MapPage.ngOnInit (map.page.ts:19) at checkAndUpdateDirectiveInline (core.js:22098) at checkAndUpdateNodeInline (core.js:23362) at checkAndUpdateNode (core.js:23324) at debugCheckAndUpdateNode (core.js:23958) at debugCheckDirectivesFn (core.js:23918) at Object.eval [as updateDirectives] (MapPage_Host.ngfactory.js? [sm]:1) at Object.debugUpdateDirectives [as updateDirectives] (core.js:23910) at checkAndUpdateView (core.js:23306)

Any pointers would be appreciated.

1
htmlangulargoogle-mapsionic-frameworkionic4
Could you please provide more details on what exactly you would like to achieve, as well as the code you have got so far, so we can actually help you solve this problem? The details you have given are very little and not enough to answer the question. – Julia
did you replace API_KEY with your own API key? – Guerric P

1 Answers

0
votes

Install Google map types npm install --save @types/googlemaps

You can modify your file to include 

/// <reference types="@types/googlemaps" />

I think there is another way, you can modify tsconfig to add typeRoots path. I haven't used this approach.

Reference: How to install Typescript typings for google maps