Using Angular 2 Google Maps Places to load nearby hospitals

Question

I am currently trying to create a page that will locate where a user is, and then use the Google Maps places library to show the hospitals near them.

This Codepen is a perfect example of what I want to show when I load the page. But implementing that code has not been working effectively with my Angular/Ionic application.

First I began by loading the google maps library using

<script src="https://maps.googleapis.com/maps/api/js 
key=AIzaSyBuBzeYkYimIquGG5KkIcB6vFmtHMUzDFo&libraries=places" async defer>
</script>

And then inside of the component I created a ngOnInit() that would run the javascript found in the codepen. Except at the end of the function, I added initMap() so that it would initialize the map, as in the Codepen it is a callback on the script.

Secondly, I tried to get it working with Angular Google Maps but was again unable to get it to work. When I was trying to get it working with AGM, I was receiving the following error when trying to go to the page on which the map is located:

Error: Uncaught (in promise): Error: Cannot find control with unspecified 
name attribute
Error: Cannot find control with unspecified name attribute
at _throwError (forms.es5.js:1830)
at setUpControl (forms.es5.js:1738)
at FormControlDirective.ngOnChanges (forms.es5.js:4520)
at checkAndUpdateDirectiveInline (core.es5.js:10812)
at checkAndUpdateNodeInline (core.es5.js:12238)
at checkAndUpdateNode (core.es5.js:12177)
at debugCheckAndUpdateNode (core.es5.js:12880)
at debugCheckDirectivesFn (core.es5.js:12821)
at Object.eval [as updateDirectives] (MapPage.html:17)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12806)
at _throwError (forms.es5.js:1830)
at setUpControl (forms.es5.js:1738)
at FormControlDirective.ngOnChanges (forms.es5.js:4520)
at checkAndUpdateDirectiveInline (core.es5.js:10812)
at checkAndUpdateNodeInline (core.es5.js:12238)
at checkAndUpdateNode (core.es5.js:12177)
at debugCheckAndUpdateNode (core.es5.js:12880)
at debugCheckDirectivesFn (core.es5.js:12821)
at Object.eval [as updateDirectives] (MapPage.html:17)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12806)
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at NavControllerBase._fireError (nav-controller-base.js:322)
at NavControllerBase._failed (nav-controller-base.js:310)
at nav-controller-base.js:365
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.es5.js:4149)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3

But I'm not entirely sure that this problem has to do with AGM because after a second or two, a reference error appeared and said that ReferenceError: google is not defined. I was getting this error earlier and I ran the command npm install --save @types/googlemaps in order to download the typings for google but still received this error even after I did that.

To reiterate, I am attempting to use Google Maps Places to load hospitals near a user, but am unable to get this working with Angular, but the Codepen linked above is the functionality that I wish to bring to my application, any help would be greatly appreciated.

Answer 1

Just like the codepen you linked, the script call has a param to know which function it will use for its callback &callback=initMap:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuBzeYkYimIquGG5KkIcB6vFmtHMUzDFo&signed_in=true&libraries=places&callback=initMap" async defer></script>

You are getting the ReferenceError: google is not defined because the script is called asynchronously and your initMap() is being called ahead of time, before the script loads. So just do the same as what's done in the codepen.