I'm currently trying to get a simple app up and running that uses NgMap to overlay custom polygons on a map of the United States. I have been following this example NgMap Simple Polygon. The largest difference I would have compared to this example is I will eventually be transitioning to pulling data from a local json file. Here is my controller code and my html code.
(function () {
var app = angular.module("testApp", ['ngMap']);
app.controller("MapController", MapController);
MapController.$inject = ['$scope', '$timeout', '$http', '$window', 'NgMap'];
function MapController($scope, $timeout, $http, $window, NgMap) {
$scope.eastern = getRegionInfo("eastern");
$scope.florida = [];
$scope.gateway = [];
$scope.metroNortheast = [];
$scope.midAmerica = [];
$scope.midWest = [];
$scope.newEnglad = [];
$scope.northern = [];
$scope.southern = [];
$scope.southwest = [];
$scope.western = [];
var easternRegion = new google.maps.Polygon({
});
function getRegionInfo(region) {
$http.get("data/regions.txt").success(function (data) {
$scope[region] = data[region];
})
};
};
})();<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Simple Map">
<meta name="keywords" content="ng-map,AngularJS,center">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="./libraries/angularjs/angular.js">
</script><script src="http://maps.google.com/maps/api/js?key=AIzaSyCi1Dh2ssMKOEwzvOWtDOfQA2gtKMK_yBM&libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="./views/MapController.js"></script>
<script src="./libraries/bootstrap/js/ui-bootstrap-tpls-2.0.0.js"></script>
<script src="./libraries/ng-map.js"></script>
<link href="./libraries/bootstrap/css/bootstrap.css" rel="stylesheet">
<title>Test</title>
</head>
<body ng-app="testApp">
<div ng-controller="MapController as App">
<ng-map center="[40.74, -74.18]"
map-type-id="TERRAIN">
<shape name="easternRegion"
paths="[
[25.774252, -80.190262],
[18.466465, -66.118292],
[32.321384, -64.75737],
[25.774252, -80.190262]
]"
stroke-color="#FF0000"
stroke-opacity="0.8"
stroke-weight="2"
fill-color="#FF0000"
fill-opacity="0.35">
</shape>
</ng-map>
</div>
</body>
</html>Sadly when I run the current code I receive this error in the console.
TypeError: Cannot read property 'id' of undefined at __MapController.vm.addObject (http://localhost:64080/libraries/ng-map.js:67:30) at linkFunc (http://localhost:64080/libraries/ng-map.js:2084:21) at invokeLinkFn (http://localhost:64080/libraries/angularjs/angular.js:9694:9) at nodeLinkFn (http://localhost:64080/libraries/angularjs/angular.js:9093:11) at compositeLinkFn (http://localhost:64080/libraries/angularjs/angular.js:8397:13) at nodeLinkFn (http://localhost:64080/libraries/angularjs/angular.js:9088:24) at compositeLinkFn (http://localhost:64080/libraries/angularjs/angular.js:8397:13) at nodeLinkFn (http://localhost:64080/libraries/angularjs/angular.js:9088:24) at compositeLinkFn (http://localhost:64080/libraries/angularjs/angular.js:8397:13) at compositeLinkFn (http://localhost:64080/libraries/angularjs/angular.js:8400:13)
This is the function call where the undefined object is causing the errors.
/**
* Add an object to the collection of group
* @memberof __MapController
* @function addObject
* @param groupName the name of collection that object belongs to
* @param obj an object to add into a collection, i.e. marker, shape
*/
vm.addObject = function(groupName, obj) {
if (vm.map) {
vm.map[groupName] = vm.map[groupName] || {};
var len = Object.keys(vm.map[groupName]).length;
vm.map[groupName][obj.id || len] = obj;
if (vm.map instanceof google.maps.Map) {
//infoWindow.setMap works like infoWindow.open
if (groupName != "infoWindows" && obj.setMap) {
obj.setMap && obj.setMap(vm.map);
}
if (obj.centered && obj.position) {
vm.map.setCenter(obj.position);
}
(groupName == 'markers') && vm.objectChanged('markers');
(groupName == 'customMarkers') && vm.objectChanged('customMarkers');
}
}
};It seems that the content in the shape tag isn't being properly parsed? I'm not sure about what to do here. Any insight on this issue? Thanks!
The error occurs due the following declaration:
<shape name="easternRegion"
^^^^^^^^^^^^^
unknown shape type
The point is that name attribute of shape directive is reserved for the following values (share types):
circlepolygonpolylinerectanglegroundOverlay(or image)In your case shape is not getting initialized.
Modified example
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="ngMap">
<ng-map center="[25.774252, -80.190262]" zoom="4"
map-type-id="TERRAIN">
<shape name="polygon"
paths="[
[25.774252, -80.190262],
[18.466465, -66.118292],
[32.321384, -64.75737],
[25.774252, -80.190262]
]"
stroke-color="#FF0000"
stroke-opacity="0.8"
stroke-weight="2"
fill-color="#FF0000"
fill-opacity="0.35">
</shape>
</ng-map>
</div>