ReferenceError: google is not defined - angular-google-maps

Question

I want to embed google maps in to my project ,but got stuck with this issue ,i was searching for many solutions but none solved my issue. I really cant understand why this error is coming !
This is my javascript file
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(25,80),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function (info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.city
});
marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
for (i = 0; i < cities.length; i++){
createMarker(cities[i]);
}
$scope.openInfoWindow = function(e, selectedMarker){
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}

Answer 1

Afaik, you are using angular and plain google sdk, which is pain (you have to use $apply everywhere, you must destroy events yourself, etc.), you should definitely checkout angular-google-maps module, it has great documentation, below working simple demo
angular.module('app', ['uiGmapgoogle-maps']).controller('ctrl', function($scope){
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
});
.angular-google-map-container { height: 400px; }
<script src='http://maps.googleapis.com/maps/api/js'></script>
<script src="
http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="https://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js"></script>
<script src="http://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
<div ng-app="app" ng-controller="ctrl">
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
</div>