Just had to figure out how to use the AngularGoogleMaps package with a Google API key. I had to use an API key because of the changes Google made to their standard (free) Google Maps plan:
Open
App_Plugins\AngularGoogleMaps\Controller.js and find the apiKey
variable. Insert you key here.
On the next two lines in the controller.js file, rename KEY
to apiKey. Seems like a typo.
Next go back to the Google API
Manager https://console.developers.google.com/apis Search for
"Google Places API Web Service" and enable it. This enables the
AutoSuggest feature you use when search for a location.
I didn't realise that they had forced us to use API keys again, I'm gonna have to come up with a better solution than amending the js file. eg. Allow developer to set the API key when they create the data type.
Since Google have added the requirement that you must have an API Key for all new Google maps, its made using 1.0.8 a bit of a pain (You have to edit the js file to include the API Key). I am in the process of updating this package, and have so far spent 2 days on it, and will need a couple more before its ready.
If your able to wait for 1.0.9, I suggest you do, but if not - then yes your gonna have to get your hands dirty and try and figure out what your issue is, looking for errors in your Developer tools' console can sometimes throw up what is your issue.
Thank you very much for this great package and support you provided.
Best regards...
Edit: Prior to Google's API Key obligation, I was using AGM within nested content data type to store e.g. contact information of branches of a company.
After upgrading to latest version, AMG works only if one instance is present on content. If i try to add a second instance, animating dots rotate endlessly and i get the following errors in JS console.
Use of getPreventDefault() is deprecated. Use defaultPrevented instead. DependencyHandler.axd:2:44770
location was showing for first time DependencyHandler.axd:6:30
Empty string passed to getElementById(). DependencyHandler.axd:2:1060
Prefixed Fullscreen API is deprecated. Please use unprefixed API for fullscreen. For more help https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API controls.js:23:54
Empty string passed to getElementById(). DependencyHandler.axd:2:1060
Empty string passed to getElementById(). DependencyHandler.axd:2:1060
Even i could change my setup and document type, I report this to issue to contribute the development of this handy tool.
I can see in your error log posted you have DependencyHandler.axd, which happens when you run your website in Non Debug mode - obviously this is a good thing, but could you try and switching on debug in your web.config and tell me if the error goes away.
I've got a test Umbraco site that I use to test AGM in different settings (If you downloaded the source code to AGM, you can see it in action), and I've tried to replicate your description
In the screen shot below, is multiple AGM within Nested Content running in 'release' mode
I'm hoping that because you are running in debug mode, your error log will be different. It should show what js file is causing this issue and on what line. This might help in me being able to replicate.
I installed the AngularGoogleMaps 2.0.1 package in Umbraco 7.3.4.
The //site/wwwroot/App_Plugins/AngularGoogleMaps/2.0.1/agm.js en /agm-mapprovider.js needed to be edited: giving the apiKey variables a legitimate key did the trick. Without this the verification in the dataType defintion did not complete successfully.
In version 2.0.1 there is no need to edit the js file to enter the API key any more. You can set the key when you create the data type.
EDIT: But thank you for reminding me that agm-mapprovider.js as well as some other javascript files, are actually unused and I should remove them. agm-mapprovider.js is an older version of agm.js before I renamed it.
Howto: Use AngularGoogleMaps with a Google API key
Hi,
Just had to figure out how to use the AngularGoogleMaps package with a Google API key. I had to use an API key because of the changes Google made to their standard (free) Google Maps plan:
We no longer support keyless access (any request that doesn't include an API key). Future product updates are only available for requests made with an API key. https://developers.google.com/maps/pricing-and-plans/standard-plan-2016-update
This is how I went about it:
Cheers
Bjørn
Good advice, thxs Bjorn.
I didn't realise that they had forced us to use API keys again, I'm gonna have to come up with a better solution than amending the js file. eg. Allow developer to set the API key when they create the data type.
Thanks for the advice but i couldn't manage to make it work. What version of the package do you use?
I have the package version 1.0.8-alpha-000017
Hi Osman,
Good question! I am using version 1.0.7
Cheers Bjørn
Nope 1.0.7. is not working on my side.
Thanks.
Since Google have added the requirement that you must have an API Key for all new Google maps, its made using 1.0.8 a bit of a pain (You have to edit the js file to include the API Key). I am in the process of updating this package, and have so far spent 2 days on it, and will need a couple more before its ready.
If your able to wait for 1.0.9, I suggest you do, but if not - then yes your gonna have to get your hands dirty and try and figure out what your issue is, looking for errors in your Developer tools' console can sometimes throw up what is your issue.
Goood news Jonathan. I'll be waiting for the updated package. Thank you very much.
Best regards...
There is now a new version of AGM to fix this issue. Version 1.0.9
Thank you very much for this great package and support you provided.
Best regards...
Edit: Prior to Google's API Key obligation, I was using AGM within nested content data type to store e.g. contact information of branches of a company.
After upgrading to latest version, AMG works only if one instance is present on content. If i try to add a second instance, animating dots rotate endlessly and i get the following errors in JS console.
Even i could change my setup and document type, I report this to issue to contribute the development of this handy tool.
Cheers,
Osman
Hi Osman
I can see in your error log posted you have DependencyHandler.axd, which happens when you run your website in Non Debug mode - obviously this is a good thing, but could you try and switching on debug in your web.config and tell me if the error goes away.
How to switch on debug mode
I'll try and replicate anyway.
Hi Osman
I've got a test Umbraco site that I use to test AGM in different settings (If you downloaded the source code to AGM, you can see it in action), and I've tried to replicate your description
In the screen shot below, is multiple AGM within Nested Content running in 'release' mode
Hi Jonathan,
Switching the debug mode didn't solve the problem. I still get the same errors.
Where can i download the source code to AGM?
Thanks
Edit: I emptied the \App_Data\TEMP\ClientDependency folder and that seems to fix the error.
Thank you.
Hi Osman
https://bitbucket.org/Joniff/angulargooglemaps
btw:
I'm hoping that because you are running in debug mode, your error log will be different. It should show what js file is causing this issue and on what line. This might help in me being able to replicate.
Cheers
I checked the last option on AGM datatype (Reduce Watches). That may also have solved my problem.
Have a nice weekend :)
Just a FYI:
I installed the AngularGoogleMaps 2.0.1 package in Umbraco 7.3.4.
The //site/wwwroot/App_Plugins/AngularGoogleMaps/2.0.1/agm.js en /agm-mapprovider.js needed to be edited: giving the apiKey variables a legitimate key did the trick. Without this the verification in the dataType defintion did not complete successfully.
Hi Serge,
In version 2.0.1 there is no need to edit the js file to enter the API key any more. You can set the key when you create the data type.
EDIT: But thank you for reminding me that agm-mapprovider.js as well as some other javascript files, are actually unused and I should remove them. agm-mapprovider.js is an older version of agm.js before I renamed it.
is working on a reply...