I am currently working on an application that involves integrating Google Maps into an Angular app to display coordinates on the map when a user selects a location. However, I am encountering an error when trying to load the app. The HTML seems to be functioning correctly, but the Google Map is not displaying on the app. You can view the app at:
http://creative.coventry.ac.uk/~4078078/Map/
The error message states: 'gMarker.key undefined and it is REQUIRED!'
Below is the code snippet provided:
<script src="http://maps.googleapis.com/maps/api/js?libraries=weather,geometry,visualization&sensor=false&language=en&v=3.14"></script>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9c8c7cedcc5c8db87c3dae998879b87d1">[email protected]</a>" src="http://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.underscore.min.js"></script>
<script src="http://rawgithub.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-controller="mainCtrl">
<select ng-model="selectedCoordinate" ng-options="coordinate.caption for coordinate in coordinates">
</select>
<label>zoom</label>
<input type="number" ng-model="zoom"/>
<div id="map_canvas">
<google-map center="selectedCoordinate" zoom="zoom" draggable="true" options="options">
<marker coords="selectedCoordinate"></marker>
</google-map>
</div>
I have included the necessary head files as previous errors were related to missing files. How can this error be resolved?