<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Radius Map" />
<title>Radius Map</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" data-require="bootstrap-css@*" data-semver="4.0.0-alpha.2" />
<script src="https://maps.google.com/maps/api/js?key=AIzaSyDixBXjHHFrb0JCFp6xVW29GXVXX83NOqQ"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" crossorigin="anonymous" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container" ng-controller="ConflictController as ConflictController">
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-2">
<button ng-click="ConflictController.GetData()">Get Data</button>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<button ng-click="ConflictController.Reset()">Reset</button>
</div>
</div>
<br />
<div class="row" ng-repeat="marker in ConflictController.markerList">
<div class="col-xs-3 col-sm-3 col-md-3">{{marker.address}}</div>
<div class="col-xs-2 col-sm-1 col-md-1">{{marker.city}}</div>
<div class="col-xs-1 col-sm-1 col-md-1">{{marker.zip}}</div>
<div class="col-xs-1 col-sm-1 col-md-1">{{marker.color}}</div>
<div class="col-xs-1 col-sm-1 col-md-1">{{marker.radius}}</div>
</div>
<br />
<div class="row">
<div class="col-sm-8 col-md-8">
<button class="btn btn-primary center-block" ng-click="ConflictController.initMap()">
Populate Map
</button>
</div>
</div>
<div style="width: 800px; height: 600px; position: relative;">
<ng-map id="myMap" zoom="13" center="{{ConflictController.mapCenter}}" lazy-init="true" default-style="false">
<!-- this does not work if markers are reset and re-populated... zoom-to-include-markers="auto" scrollwheel="false" -->
<marker title="{{marker.desription}}" id="mkId{{marker.id}}" ng-repeat="marker in ConflictController.mapMarkers" on-click="ConflictController.showMarker(marker)" position="{{marker.address}} {{marker.city}} CA {{marker.zip}}"></marker>
<shape name="circle" ng-repeat="marker in ConflictController.mapMarkers" center="{{marker.address}} {{marker.city}} CA {{marker.zip}}" radius="{{0.3048 * marker.radius}}" fill-opacity="0.35" fill-color="{{marker.color}}" stroke-weight="2" stroke-opacity="0.8" stroke-color="#000000"></shape>
<info-window id="info">
<div ng-non-bindable="">
<b>Address: </b>{{ConflictController.marker.address}}<br />
<b>Description: </b>{{ConflictController.marker.description}}<br />
({{ConflictController.marker.color}} circle: {{ConflictController.marker.radius}} Ft. radius) <br />
</div>
</info-window>
</ng-map>
</div>
</div>
</body>
</html>
// Code goes here
// 'use strict';
console.log("myApp.js launched");
var app = angular.module('myApp', ['ngMap']);
app.controller('ConflictController', ['$scope', '$http', '$timeout', 'NgMap', function ($scope, $http, $timeout, NgMap) {
var _this = this;
_this.name = 'ConflictController';
_this.mapCenter = 'Venice, California 90291';
_this.markerList = [{
"id": '',
"location": { "lat": 0, "lng": 0 },
"description": "",
"address": "",
"city": "",
"zip": "",
"color": "",
"radius": 0
}];
this.getNextMarkerId = function () {
var nextMarkerId = 1;
for (var i = 0; i < _this.markerList.length; i++) {
if (parseInt(_this.markerList[i].id) > nextMarkerId) {
nextMarkerId = parseInt(_this.markerList[i].id);
};
};
return nextMarkerId.toString();
};
//var geocoder = new google.maps.Geocoder();
this.initMap = function () {
// move list to map
_this.mapMarkers = angular.copy(_this.markerList);
if (_this.map == undefined) {
_this.map = NgMap.initMap('myMap');
};
console.log('_this.map loaded', _this.map)
};
this.showMarker = function (evt, marker) {
_this.marker = marker;
_this.map.showInfoWindow('info', 'mkId' + marker.id);
};
this.GetData = function () {
// load json file from server
//$http.get('cnc/agenda.json').
// success(function (data, status, headers, config) {
// _this.markerList = [];
// _this.markerList = data;
// }).
// error(function (data, status, headers, config) {
// // log error
// });
// use sample data rather than loading external file
_this.markerList = angular.copy(_this.sampleData);
};
this.Reset = function () {
_this.markerList = [];
_this.mapMarkers = [];
}
_this.sampleData = [
{
"description": "Case: DIR-2015-2907-CDP-SPP",
"address": "934 Amoroso Place",
"city": "venice",
"zip": "90291",
"color": "Red",
"radius": 500,
"location": { "lat": 0, "lng": 0 },
"id": "0"
},
{
"description": "ZA2007-5397-CUB-PA1",
"address": "225 South Lincoln Boulevard",
"city": "venice",
"zip": "90291",
"color": "Red",
"radius": 500,
"location": { "lat": 0, "lng": 0 },
"id": "1"
},
{
"description": "Case: DIR-2016-1165-VSO",
"address": "3024 Stanford Ave",
"city": "venice",
"zip": "90291",
"color": "Red",
"radius": 500,
"location": { "lat": 0, "lng": 0 },
"id": "2"
},
{
"description": "Case: DIR-2016-1023-VSO",
"address": "219 Linnie Canal",
"city": "venice",
"zip": "90291",
"color": "Red",
"radius": 500,
"location": { "lat": 0, "lng": 0 },
"id": "3"
},
{
"description": "Westminster Senior Center",
"address": "1234 Pacific Ave",
"city": "venice",
"zip": "90291",
"color": "Green",
"radius": 500,
"location": { "lat": 0, "lng": 0 },
"id": "4"
},
{
"description": "Case: ZA-2015-2913ZV DIR-2105-2912CDP-SPP",
"address": "217 E North Venice Blvd",
"city": "venice",
"zip": "90291",
"color": "Red",
"radius": 500,
"location": { "lat": 0, "lng": 0 },
"id": "5"
}
];
}]); // end controller
/* Styles go here */
ng-map {
width: 100%;
height: 100%;
position: absolute;
Trying to load addresses onto a map and include a marker and circle for each location. An infoWindow is also included for user to click on marker and get more details about the location.
The marker circles only show up randomally.
And it gets worse, if I reset the markers and circles but re-initlizing their arrays, then the markers and circles go even more haywire!
At the end of the day I want to be able to add markers with circles on the fly, reset the map and show a different list. Must be something simple...
Also noticed a bug with the zoom-to-include-markers="auto" drective. If it is included with the ng-map tag, after resetting the markers the map goes light blue and nothing brings it back. But this is a second issue that might or might not be related.
Thanks in advance for any help...