If you ever wondered how to add a Google map to you Angular app, I'm going to show you how. I know there are libraries to do so like AGM which work...
For further actions, you may consider blocking this person and/or reporting abuse
Hi! great Tutorial!
But I run ng test but it has an error ReferenceError: google is not defined
Not sure how to mock google api or in which way to resolve this. Any clue?
do you have a repo?
Have you tried steps 5 and 6?
Have you tried this?
TS error for the google declaration, that you should add to your tsconfig.app.json and tsconfig.spec.json this line "types": ["googlemaps"]
keep me posted
Hi Thanks for you reply. I had to mock the googlemap and I follow this github.com/ScottieR/angular-google...
and add in the karma file
files:[
"maps.googleapis.com/maps/api/js?ke...",
"src/app/test/google.api.mock.js"
],
so this solved your issue? correct?
yes!
cool! Thanks for sharing your solution
The same issue, cannot make it work even using different tricks and workarounds
do you have a repo?
Have you tried this? and step 5 and 6 from the article
TS error for the google declaration, that you should add to your tsconfig.app.json and tsconfig.spec.json this line "types": ["googlemaps"]
yes, I'd tried that but without success. I'd reproduced the issue in this simplified setup - small Angular app with a single module with google maps, addressing global google maps object inside the component code. The error when running Jest suite is the same.
Hi bud! did yo have a chance to add what Pamela did by adding the mock file? Let me know if it works. i took a look to your app. I noticed you are using the angular google maps. I tried so many things and I can't resolve your issue. If what Pamela did doesn't work for you let me know. I will ask my friends who are GDEs on Google Maps and some other GDEs on Angular
Wow, that's really a gem 🔥 I mean the idea Pamela mentioned. As I use Jest, I've changed it a little bit, so I use basically the same mock object but put it into
jest.config.js(and use another config property, correspondingly)So Pato, thanks for getting into it, and big thanks to Pamela for providing this trick 👍
I am having the same error
Uncaught (in promise): ReferenceError: google is not defined.
Tried creating index.d.ts file and even spec.ts.config but not working.
Any solution please.
here my repo - find in mapComponent
github.com/13bhavya/ng-website.git
Read comments above. They contain the solution :)
did you try pamelas aproach?
I tried to understand that after I found there was an error in script of index.html :
<script src=”http://maps.googleapis.com/maps/api/js?key=API-KEY" type="text"></script>I added only text not Javascript.
Such a silly I was finding everywhere else.
No need to create index.d.ts file.
Thanks though.
Im glad you found you issue :)
Thanks. This helped me to get rid of agmp, because that wouldn't allow me to customize the style.
You could also add the part that if you get a TS error for the
googledeclaration, that you should add to yourtsconfig.app.jsonandtsconfig.spec.jsonthis line"types": ["googlemaps"]thanks!! i will add it :)
Hi, this is great thank you!
Worked with first trial - with some error messages.
I got an error: "ERROR in src/app/app.component.ts:11:8 - error TS2503: Cannot find namespace 'google'." when serving (though map rendered OK as such). Pamela's instructions did not help.
Instead I added a file "index.d.ts" to the ./src directory as instructed here: medium.com/@jkeung/integrating-goo... .The file only contains " declare module 'googlemaps'; ", and then serving again got rid of error message.
I have a repo at github.com/Helleeni/angular-gmap.git
PS. Tried this in a real project and only needed to add "index.d.ts" file with the above mentioned content to get rid of error messages. No other changes necessary (so far ...). Thanks again for great tutorials!
thanks for this! I will make a reference to this comment in the actual post pretty soon and give you credit ;)
Hey Pato,
Thanks a lot for the wonderful post and it works like a Gem..!!
I have a question though, is there any way to track the Lat and Lng information when the user clicks on different areas on the map.?
Thanks in advance..!! :)
Hey Pato,
Managed to find it. Did some tweaking on the code from Javascript Google API reference. :)
Once again, thanks for an excellent post..!! It was really helpful..!!
Hello,
The @types/googlemaps hasn't got
preventMapHitsAndGesturesFrommethod ofgoogle.maps.OverlayView. Do you know how to make it available in type?Thank you.
I created github.com/DefinitelyTyped/Definit... issue .
I will check it out!
@Pato I created pull request adding those methods and waiting for reviewers.
github.com/DefinitelyTyped/Definit...
Hi, how to add event on click of marker want to open pop up. How can i do?
dev.to/devpato/multiple-markers-on...
Hi! I don't know why I just saw this. I'm about to work on that tutorial and post it soon ;)
Thanks! Worked first time :)
Great tutorial friend, do you give private lessons specifically on map events? I am interested in showing the current position on the map and several marker near the location but I do not get it
I can try to make a tutorial on that!
let me know if this can help you dev.to/devpato/multiple-markers-on...
By doing this, Secret Google API Key will always be visible to end-user, Is there is any way to hide the key and still use it?
If you add the security to your API key on the Google platform it won't matter who has your key. You can specify which website can only use your key
Great job man ! I wonder if this tutorial is for the static map?
I followed the tutorial. Works as expected with static data. How can I modify it as I am getting the coordinates from a REST API?
Also, sometimes I am getting a gray overlay over the map