I'm trying to include google maps in my side-project and i can't seem to know why this doesn't work after watching countless tutorials. One way I was able to do a work around was to include the src script in right below the init function on the html and then on the controller file write the initMap() function outside the angular.module('breazehomeDesktop').controller(). Can someone please help?
this is my html
!doctype html>
<html>
<head>
<!-- Tab Title -->
<title>Local Scoop</title>
<!-- Javascript Import-->
<script src="../scripts/controllers/localscoop.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY_GOES HERE"></script>
</head>
<body ng-app="breazehomeDesktop" ng-controller="LocalScoopCtrl">
<!-- MAP -->
<div id="map" ng-init="initMap()">
<script>initMap()</script>
</div>
</body>
</html>
and this is my controller
angular.module('breazehomeDesktop').controller('LocalScoopCtrl', function($scope, $rootScope, $location, $localStorage, $routeParams, $anchorScroll, $http, Properties, Amenities, Bilingual,toasts,Users,Crime, Map, BASE_URL, IMAGE_URL, ModalService, History) {
$scope.initMap = function (){
var map = new google.maps.Map(document.getElementById('map'),{
zoom:8,
center: {
latitude:25.7617,
longitude:-80.191790
}
}
)};
});