Service Portal: Creating a Google Maps widget

[cczernia]

Hi,

I'm trying to make use of the Google Maps API in Service Portal by building a widget around it. All I'm trying to do is get the map to render like the example found here.

https://developers.google.com/maps/documentation/javascript/examples/map-simple

Easy enough to do in a static webpage but when I create a SP widget and move the script to "Client Script" area I can't get the callback function in the googleapi src to fire.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"

I also tried creating a google maps angular provider.
https://github.com/allenhwkim/angularjs-google-maps

That just resulted in a lot of errors.

Has anyone successfully implemented this or have any suggestion? Thanks.

[Will9]

I downloaded this widget but it fails to read the Google Map API key.  Do you know where the API key should be included?

[cczernia]

I added it as a static url in dependencies. It is a JS include with source of URL.  The key is part of that JS file URL.

[Jimmy45]

I noticed that none of the above links are valid anymore.  Can anyone point me to the most current "working" page to view these details?  Much appreciated!

[Community Alums]

Hi Jimmy45 - did anyone reply to your question? I'm looking for some google Maps examples (there's the ticket location widget in the CSM portal, but that's just about all I can find).

Thanks,

Jason

[cczernia]

Here is the original solution. I did not create it and not sure what happened to the share page. 

- install the update set.

- From the sp_widget form of your widget add the dependency "Google Maps Extension"

- In the dependency is a place for a key. Add your google key. It looks like this:
https://maps.googleapis.com/maps/api/js?key=

- On the Body HTML template add <ng-map></ng-map>

- Load your widget and see if google maps loads.