Uncaught TypeError: Object [object global] does not have a method of 'onGoogleReady' using angular -ui ui.maps with Angular.js

Question

I am trying to use angular -ui ui-map using Angular.js and get an error

"Uncaught TypeError: Object [object global] does not have a method of 'onGoogleReady' using ui.maps with Angular.js."

I understand that I need to include:

function onGoogleReady() { angular.bootstrap(document.getElementById("map"), ['app.ui-map']); } 

but where and how?

Answer 1

  function initCall() { console.log("Google maps api initialized."); angular.bootstrap(document.getElementById("map"), ['doc.ui-map']); } angular.module('doc.ui-map', ['ui.map', 'prettifyDirective']) .controller('MapCtrl', ['$scope', function ($scope) { $scope.myMarkers = []; $scope.mapOptions = { center: new google.maps.LatLng(35.784, -78.670), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; $scope.addMarker = function ($event, $params) { $scope.myMarkers.push(new google.maps.Marker({ map: $scope.myMap, position: $params[0].latLng })); }; $scope.setZoomMessage = function (zoom) { $scope.zoomMessage = 'You just zoomed to ' + zoom + '!'; console.log(zoom, 'zoomed'); }; $scope.openMarkerInfo = function (marker) { $scope.currentMarker = marker; $scope.currentMarkerLat = marker.getPosition().lat(); $scope.currentMarkerLng = marker.getPosition().lng(); $scope.myInfoWindow.open($scope.myMap, marker); }; $scope.setMarkerPosition = function (marker, lat, lng) { marker.setPosition(new google.maps.LatLng(lat, lng)); }; }]) ; 

Source: Demo.js