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.

[navneet_kumar]

I have imported the update set in my personal instance but I do not have widget where I have to make these changes.

Please provide me widget details also.

Thanks in advance

[cczernia]

There is no widget part of the update set.

Where you want the map to go in html template add: <ng-map></ng-map>

In the client script you'll add something like this:

//set google maps
NgMap.getMap().then(function(map) {
	var pos = new google.maps.LatLng(c.data.starting_latitude, c.data.starting_longitude);
	map.setCenter(pos);
	map.setOptions({streetViewControl: false, mapTypeControl: false, scaleControl: false});
	map.setZoom(c.data.starting_zoom*1);
	generateMarkers(map, false);
});

A lot of the stuff in there is code I wrote based on the Google Map API.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map

The point of the dependency is to allow you to use the API in your client script.

[navneet_kumar]

I created a new widget and using html "<ng-map></ng-map>"and client script suggested by you but its now working.

Hope you can provide me complete widget details. like what I will put in HTML, Client script, server script.

[cczernia]

Another thing to add is in the client script function include NgMap. I'll see about coming up with a widget.

function (NgMap, $scope, $timeout, spUtil)