Question
SedgwickCMS
US
Last activity: 16 Sep 2016 6:58 EDT
Integrating Google Maps API using Pega
While exploring I see that Pega is offering GOOGLE.JAR to integrate with Google Api .
1. How to get this google.jar file to import into application ?
2. Is this Google.jar mandatory to integrate with Google API from Pega ? to leverage the Route Map and Directions features from Pega Application.
3. Suggestions to kick start this with less dependencies.
Appreciate your responses.
Thanks,
Raja
SR-A86232
***Updated by Moderator: Vidyaranjan | Included SR number
Accepted Solution
Updated: 17 Aug 2016 7:38 EDT
Apple India Pvt Ltd
IN
Hi I have done with Google integration in our application,
For this we need to follow below
1. Create an api key for your current application in https://console.developers.google.com/ for this you should have a google account.
2. Once you logged in https://console.developers.google.com/ then create a project in the api and then select your project.
3. On the Dashboard click on Enable API , in that select "Google Maps JavaScript API" and "Google Maps Geolocation API"
4. When you are selecting this you are being prompted to create credentials, these credentials are for generating the API key for your application
5. When you create Credentials select "API Key", in that select "Browser Key"
6. In that follow below things
i. If you are using "localhost" then just enter in the text instead of "example.com" enter "localhost"
ii. If you are using IP address then enter in the text instead of "www.example.com" enter " Proprietary information hidden"
iii. If you are using domain url "www.example.com" enter "www.example.com"
7. Then click on Create button, then it will prompt you to copy the API key.
8. Copy the API key in to your pega, and paste it in "googleapikey" dss.
Now drag and drop your Adressmap control to your section, test it it will work..
Thanks & Regards,
Hi I have done with Google integration in our application,
For this we need to follow below
1. Create an api key for your current application in https://console.developers.google.com/ for this you should have a google account.
2. Once you logged in https://console.developers.google.com/ then create a project in the api and then select your project.
3. On the Dashboard click on Enable API , in that select "Google Maps JavaScript API" and "Google Maps Geolocation API"
4. When you are selecting this you are being prompted to create credentials, these credentials are for generating the API key for your application
5. When you create Credentials select "API Key", in that select "Browser Key"
6. In that follow below things
i. If you are using "localhost" then just enter in the text instead of "example.com" enter "localhost"
ii. If you are using IP address then enter in the text instead of "www.example.com" enter " Proprietary information hidden"
iii. If you are using domain url "www.example.com" enter "www.example.com"
7. Then click on Create button, then it will prompt you to copy the API key.
8. Copy the API key in to your pega, and paste it in "googleapikey" dss.
Now drag and drop your Adressmap control to your section, test it it will work..
Thanks & Regards,
Bala Gangadhar P
Hi Raja,
If you want to use Address Map Control which is to use Google Map inside Pega ,Please refer to https://docs-previous.pega.com/using-address-map-control this article which may be helpful to you .
Pegasystems Inc.
US
Raja,
The google map integration is explained in this video https://pdn.pega.com/pegatube/prpc-716-update-whats-new-user-experience in the section Map control and related capabilities section.
SedgwickCMS
US
I have gone through these articles earlier.
1. Can somebody give more insight what features out of Google.Jar ?
2. Used Address Map control and configured the google API key in Pega application (7.1.8)..During preview the Map displays for a sec and getting vanished and I see a message as below
"Oops! Something went wrong."
"This page didn't load Google Maps correctly. See the JavaScript console for technical details. "
3. Any suggestions to handle on the 2nd point and insight on 1st point. ?
-Thanks,
Raja
Pegasystems Inc.
IN
The second message suggests that Google API key entered by you is no longer valid. It was valid at one point, not anymore. Please generate new Google API key as described in this doc - https://docs-previous.pega.com/using-address-map-control and configure DSS with new key.
SedgwickCMS
US
Before configuring the API key, I got the message "This page was unable to display a Google Maps element" which is because that no API is configured in Pega DSS. The API key which I generated is 2 days old and after configuring I see this new message.
"Oops! Something went wrong."
"This page didn't load Google Maps correctly. See the JavaScript console for technical details.
I will check the JS console, and let you know.
SedgwickCMS
US
Hi Vikas,
In the UI features video they discussed about how to use Address Map Control & How to use get directions Link OOTB
1. I was able to use Get Directions OOTB which is launching the google maps with current location & destination address configured in the pega app
2. But when using Address Map Control as I told I see the same error " , This is main usage as this will facilitate to view the map within the Pega App
"Oops! Something went wrong."
"This page didn't load Google Maps correctly. See the JavaScript console for technical details." But I am not getting the path how to look at the Java Script Console to see the problem description.
Appreciate your help.
SedgwickCMS
US
One more point here is while viewing the preview of the section the map is shown/visible for a sec and then getting vanished followed by that error message. If it is the problem with API key configured even the 1 second display should not work. not sure but trying to nail down options.
Apple India Pvt Ltd
IN
Hi I am getting below error;
1. I have created the project in https://console.developers.google.com/apis
2. Generated API key for http:// Proprietary information hidden:8080/prweb/PRServlet
3. I have added key googleapikey dss.
4. And then restarted the server.
When I run my case I am getting below error. I ran my case,
In UI I am getting below error
Hi I am getting below error;
1. I have created the project in https://console.developers.google.com/apis
2. Generated API key for http:// Proprietary information hidden:8080/prweb/PRServlet
3. I have added key googleapikey dss.
4. And then restarted the server.
When I run my case I am getting below error. I ran my case,
In UI I am getting below error
Your site URL to be authorized: http:// Proprietary information hidden:8080/prweb/PRServlet/1P-z-oMvymyP_rnC72ke9vdzPRDpDhmA*/!TABTHREAD3?pyActivity=ReloadHarness&pzFromFrame=pyWorkPage&pzPrimaryPageName=pyWorkPage&pzTransactionId=3f7593280ade9bcb2f9ab084de3dbc31&pzHarnessID=HID5B8A26288B836AEA31D9A8E695268658&PreActivity=RefreshOnConflicts&ActDTPage=pyWorkPage&HarnessMode=ACTION&=&Purpose=Perform&ReadOnly=-1&HarnessPurpose=Perform&FolderKey=&InputEnabled=false&EXPANDEDSubSectionpyDirtyCheckConfirmB=& =InitiaClientDataCapture&TaskHelpType=&TaskInstructionsCaption=Instructions&ActionMode=&NewAction=false&TaskIndex=1&TaskHTML=&TaskSectionReference=GoogleMaps&TaskStreamType=Rule-Obj-FlowAction&TaskStatus=InitiaClientDataCapture&TaskInstructions=&TaskHelpPresent=false&CaseContentsPagePpxResults2colWidthGBL=&CaseContentsPagePpxResults2colWidthGBR=&CaseContentsPagePpxResults2colWidth
Can anyone please help me how to fix this issue
Pegasystems Inc.
IN
Raja, you can see Javascript console by opening Developer Tools of your browser. I still think it's API key problem and the error on console will guide you properly. June 22, 2016 onwards Google has changed it's API key access policy which may have affected your use-case. More here -
Google Geo Developers Blog: Building for Scale: Updates to Google Maps APIs Standard Plan
Pegasystems Inc.
US
Hi Raja
Can you check if the issue is browser specific. Try IE and Chrome let us know if you see the JS error in both.
SedgwickCMS
US
I looked at the console for erros/warning in both IE & Chrome
Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: http://localhost:8080/prweb/PRServlet/bXwqXcZ-fIZuxPOC3eJBJ5gKVLbOrM89*/!TABTHREAD2?pyActivity=FinishAssignment&pzFromFrame=pyWorkPage&pzPrimaryPageName=pyWorkPage&pzTransactionId=11f33898594fc1fe0693229ab23c27ec&pzHarnessID=HID737EE0924ECBFDCB18E2BF67FD95865B
I looked at the console for erros/warning in both IE & Chrome
Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: http://localhost:8080/prweb/PRServlet/bXwqXcZ-fIZuxPOC3eJBJ5gKVLbOrM89*/!TABTHREAD2?pyActivity=FinishAssignment&pzFromFrame=pyWorkPage&pzPrimaryPageName=pyWorkPage&pzTransactionId=11f33898594fc1fe0693229ab23c27ec&pzHarnessID=HID737EE0924ECBFDCB18E2BF67FD95865B
1.Initial testing was done by generating the API key Google Map API for Chrome Application as we have multiple options like Android/IOS/ etc ... I choose Chrome App
2. No referers were added as it is optional
3. When I see these console errors and as suggested in google developer site (list of error codes and associated action to be taken) the above local host url was added to list referrers list
4. I still see the same problem in the console.
Pegasystems Inc.
IN
You need not choose any platform when generating API key. In your Google Code console, go to Credentials->Create Crednetials-> API key -> Select 'Browser' key. That should do it. Is your console showing key Type as Browser?
If you want to add localhost as a referrer - just add localhost/* in the list of referrers.
SedgwickCMS
US
Yes I did tried by selecting "Browser" key option.
1. After that I see a new error in the console "Google Maps API error: DeletedApiProjectMapError https://developers.google.com/maps/documentation/javascript/error-messages#deleted-api-project-map-error"
2. I don't see any type in the console browser vs server etc...
3. I did tried with and without adding localhost/* but no luck and error remains the same like I mentioned in point1
4. the google error list says below . Not sure when the project is existing it is not recognizing and encountering the below issue. I tried creating 3 different projects and new browser API key
DeletedApiProjectMapError |
Error | Your API project may have been deleted from the Google API Console. Please check the project for which you generated the API key that's included in JavaScript API loader. You can create a new API project and get a new key on the Google API Console. |
Updated: 14 Jul 2016 10:36 EDT
Pegasystems Inc.
US
Hi Raja
I just used the instructions in here https://docs-previous.pega.com/using-address-map-control and able to see the map control load without issues.
THis is my browser API
At run time, I am previewing section "pyLocationFieldOptional"
Given this , could you clarify the following
Hi Raja
I just used the instructions in here https://docs-previous.pega.com/using-address-map-control and able to see the map control load without issues.
THis is my browser API
At run time, I am previewing section "pyLocationFieldOptional"
Given this , could you clarify the following
1. Did you restart the server after setting your DSS. THe PDN article recommends it (even though I did not have any issues)
2. How are you testing the issue ? CAn you login as Proprietary information hidden / install and preview "pyLocationFieldOptional" section and check whether it loads correctly ?
Accepted Solution
Updated: 17 Aug 2016 7:38 EDT
Apple India Pvt Ltd
IN
Hi I have done with Google integration in our application,
For this we need to follow below
1. Create an api key for your current application in https://console.developers.google.com/ for this you should have a google account.
2. Once you logged in https://console.developers.google.com/ then create a project in the api and then select your project.
3. On the Dashboard click on Enable API , in that select "Google Maps JavaScript API" and "Google Maps Geolocation API"
4. When you are selecting this you are being prompted to create credentials, these credentials are for generating the API key for your application
5. When you create Credentials select "API Key", in that select "Browser Key"
6. In that follow below things
i. If you are using "localhost" then just enter in the text instead of "example.com" enter "localhost"
ii. If you are using IP address then enter in the text instead of "www.example.com" enter " Proprietary information hidden"
iii. If you are using domain url "www.example.com" enter "www.example.com"
7. Then click on Create button, then it will prompt you to copy the API key.
8. Copy the API key in to your pega, and paste it in "googleapikey" dss.
Now drag and drop your Adressmap control to your section, test it it will work..
Thanks & Regards,
Hi I have done with Google integration in our application,
For this we need to follow below
1. Create an api key for your current application in https://console.developers.google.com/ for this you should have a google account.
2. Once you logged in https://console.developers.google.com/ then create a project in the api and then select your project.
3. On the Dashboard click on Enable API , in that select "Google Maps JavaScript API" and "Google Maps Geolocation API"
4. When you are selecting this you are being prompted to create credentials, these credentials are for generating the API key for your application
5. When you create Credentials select "API Key", in that select "Browser Key"
6. In that follow below things
i. If you are using "localhost" then just enter in the text instead of "example.com" enter "localhost"
ii. If you are using IP address then enter in the text instead of "www.example.com" enter " Proprietary information hidden"
iii. If you are using domain url "www.example.com" enter "www.example.com"
7. Then click on Create button, then it will prompt you to copy the API key.
8. Copy the API key in to your pega, and paste it in "googleapikey" dss.
Now drag and drop your Adressmap control to your section, test it it will work..
Thanks & Regards,
Bala Gangadhar P
TSYS
US
I had the same issue "Google Maps API warning: SensorNotRequired"
And it worked after I enabled the API "Google Maps JavaScript API" in https://console.developers.google.com.
So, make sure you enabled this API. To enable this API login to in https://console.developers.google.com and you can enable this API in the dashbord.