Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Bjørn Fridal 274 posts 784 karma points
    Jul 05, 2016 @ 09:45
    Bjørn Fridal
    2

    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:

    1. Install the package.
    2. Goto https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key and get you API key.
    3. Open App_Plugins\AngularGoogleMaps\Controller.js and find the apiKey variable. Insert you key here.
    4. On the next two lines in the controller.js file, rename KEY to apiKey. Seems like a typo.
    5. 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.
    6. That's that!

    Cheers

    Bjørn

  • Jonathan Richards 288 posts 1742 karma points MVP
    Jul 05, 2016 @ 12:00
    Jonathan Richards
    1

    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.

  • Osman Coskun 170 posts 404 karma points
    Jul 11, 2016 @ 10:40
    Osman Coskun
    0

    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

  • Bjørn Fridal 274 posts 784 karma points
    Jul 11, 2016 @ 10:45
    Bjørn Fridal
    0

    Hi Osman,

    Good question! I am using version 1.0.7

    Cheers Bjørn

  • Osman Coskun 170 posts 404 karma points
    Jul 11, 2016 @ 11:10
    Osman Coskun
    0

    Nope 1.0.7. is not working on my side.

    Thanks.

  • Jonathan Richards 288 posts 1742 karma points MVP
    Jul 11, 2016 @ 10:52
    Jonathan Richards
    0

    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.

  • Osman Coskun 170 posts 404 karma points
    Jul 11, 2016 @ 11:10
    Osman Coskun
    0

    Goood news Jonathan. I'll be waiting for the updated package. Thank you very much.

    Best regards...

  • Jonathan Richards 288 posts 1742 karma points MVP
    Jul 13, 2016 @ 18:34
    Jonathan Richards
    2

    There is now a new version of AGM to fix this issue. Version 1.0.9

  • Osman Coskun 170 posts 404 karma points
    Jul 14, 2016 @ 23:03
    Osman Coskun
    0

    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.

    Cheers,

    Osman

  • Jonathan Richards 288 posts 1742 karma points MVP
    Jul 15, 2016 @ 08:36
    Jonathan Richards
    0

    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.

  • Jonathan Richards 288 posts 1742 karma points MVP
    Jul 15, 2016 @ 09:07
    Jonathan Richards
    1

    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

    AGM inside Nested Content

  • Osman Coskun 170 posts 404 karma points
    Jul 15, 2016 @ 10:29
    Osman Coskun
    1

    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.

  • Jonathan Richards 288 posts 1742 karma points MVP
    Jul 15, 2016 @ 10:41
    Jonathan Richards
    0

    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

  • Osman Coskun 170 posts 404 karma points
    Jul 15, 2016 @ 10:59
    Osman Coskun
    0

    I checked the last option on AGM datatype (Reduce Watches). That may also have solved my problem.

    Have a nice weekend :)

  • Serge de Wit 3 posts 83 karma points
    Aug 05, 2016 @ 12:44
    Serge de Wit
    0

    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.

  • Jonathan Richards 288 posts 1742 karma points MVP
    Aug 05, 2016 @ 12:49
    Jonathan Richards
    1

    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.

    When creating your own AGM datatype

    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.

Please Sign in or register to post replies

Write your reply to:

Draft