Skip to content

Commit e8d38d3

Browse files
nmccreadynmccready
committed
more examples
issue angular-ui#482
1 parent 6accafa commit e8d38d3

File tree

2 files changed

+161
-0
lines changed

2 files changed

+161
-0
lines changed

‎example/assets/scripts/controllers/issue-482-markers-animation-clustering.js

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
angular.module("angular-google-maps-example", ["google-maps"]).value("rndAddToLatLon",function () {
2+
return Math.floor(((Math.random() < 0.5 ? -1 : 1) * 2) + 1)
3+
}).controller("controller", function ($scope, $timeout, $log, $http, rndAddToLatLon) {
4+
// Enable the new Google Maps visuals until it gets enabled by default.
5+
// See http://googlegeodevelopers.blogspot.ca/2013/05/a-fresh-new-look-for-maps-api-for-all.html
6+
google.maps.visualRefresh = true;
7+
8+
var versionUrl = window.location.host === "rawgithub.com" ? "http://rawgithub.com/nlaplante/angular-google-maps/master/package.json" : "/package.json";
9+
10+
$http.get(versionUrl).success(function (data) {
11+
if (!data)
12+
console.error("no version object found!!");
13+
$scope.version = data.version;
14+
});
15+
16+
angular.extend($scope, {
17+
map: {
18+
control: {},
19+
center: {
20+
latitude: 45,
21+
longitude: -73
22+
},
23+
options: {
24+
streetViewControl: false,
25+
panControl: false,
26+
maxZoom: 20,
27+
minZoom: 3
28+
},
29+
zoom: 3,
30+
dragging: false,
31+
bounds: {},
32+
dynamicMarkers: [],
33+
refresh: function () {
34+
$scope.map.control.refresh(origCenter);
35+
}
36+
}
37+
});
38+
39+
$scope.refreshMap = function () {
40+
//optional param if you want to refresh you can pass null undefined or false or empty arg
41+
$scope.map.control.refresh({latitude: 32.779680, longitude: -79.935493});
42+
$scope.map.control.getGMap().setZoom(11);
43+
};
44+
$scope.getMapInstance = function () {
45+
alert("You have Map Instance of" + $scope.map.control.getGMap().toString());
46+
};
47+
48+
// var oldMarker = null;
49+
$scope.onMarkerClicked = function (marker) {
50+
// if(oldMarker){
51+
//// oldMarker.options = {animation:google.maps.Animation.DROP}; // or 2
52+
// oldMarker.options = {animation:0}; //or null
53+
// }
54+
marker.showWindow = false;
55+
if(marker.options)
56+
marker.options = null;
57+
else
58+
marker.options = {animation:google.maps.Animation.BOUNCE}; //or 1
59+
// oldMarker = marker;
60+
$scope.$apply();
61+
};
62+
63+
$scope.onInsideWindowClick = function () {
64+
alert("Window hit!");
65+
};
66+
67+
$timeout(function () {
68+
var dynamicMarkers = [
69+
{ id: 1,
70+
latitude: 46,
71+
longitude: -79
72+
},
73+
{
74+
id: 2,
75+
latitude: 33,
76+
longitude: -79
77+
},
78+
{
79+
id: 3,
80+
icon: 'assets/images/plane.png',
81+
latitude: 35,
82+
longitude: -127
83+
},
84+
{
85+
id: 4,
86+
icon: 'assets/images/plane.png',
87+
latitude: 35,
88+
longitude: -128,
89+
title: '[35,-125]'
90+
}
91+
];
92+
_.each(dynamicMarkers, function (marker) {
93+
marker.closeClick = function () {
94+
marker.showWindow = false;
95+
$scope.$apply();
96+
};
97+
marker.onClicked = function () {
98+
$scope.onMarkerClicked(marker);
99+
};
100+
});
101+
$scope.map.dynamicMarkers = dynamicMarkers;
102+
}, 2000);
103+
104+
var origCenter = {latitude: $scope.map.center.latitude, longitude: $scope.map.center.longitude};
105+
});

‎example/issue-482-markers-animation-clustering.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html xmlns:ng="http://angularjs.org" id='ng-app' ng-app="angular-google-maps-example">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>angular-google-maps example page</title>
6+
<script src="https://rawgithub.com/bestiejs/json3/v3.2.5a/lib/json3.min.js"></script>
7+
<script src="https://rawgithub.com/kriskowal/es5-shim/v2.1.0/es5-shim.min.js"></script>
8+
<script src="https://rawgithub.com/jwmcpeak/EventShim/master/eventShim.js"></script>
9+
<script src="https://rawgithub.com/aFarkas/html5shiv/3.7.0/src/html5shiv.js"></script>
10+
<![endif]-->
11+
12+
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"
13+
type="text/css">
14+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,600,300,700'
15+
rel='stylesheet' type='text/css'>
16+
<link href="assets/stylesheets/example.css" rel="stylesheet" type="text/css">
17+
</head>
18+
19+
<body ng-controller="controller">
20+
<div class="page-title ">
21+
<h2 ng-cloak>angular-google-maps example {{version}}</h2>
22+
</div>
23+
<div class="container">
24+
<div class="row">
25+
<button class="col-md-2 btn btn-success" ng-click="map.refresh()">Refresh Map</button>
26+
</div>
27+
<div class="row">
28+
<google-map class="col-md-12"
29+
center="map.center"
30+
zoom="map.zoom"
31+
dragging="map.dragging"
32+
draggable="true"
33+
control="map.control">
34+
35+
<markers models="map.dynamicMarkers" coords="'self'" icon="'icon'" click="'onClicked'" fit='true' options="'options'"
36+
doCluster="true">
37+
<windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
38+
<p ng-non-bindable>This is an info window at {{ latitude | number:4 }}, {{ longitude | number:4 }}!</p>
39+
</windows>
40+
</markers>
41+
</google-map>
42+
</div>
43+
</div>
44+
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
45+
<script src="http://maps.googleapis.com/maps/api/js?libraries=weather,visualization&sensor=false&language=en&v=3.13"></script>
46+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
47+
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
48+
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js" type="text/javascript"></script>
49+
<script src="../dist/angular-google-maps.js"></script>
50+
<script src="assets/scripts/mocks/heat-layer.js"></script>
51+
<script src="assets/scripts/controllers/issue-482-markers-animation-clustering.js"></script>
52+
<script src="assets/scripts/controllers/templates/info.js"></script>
53+
<script src="http://localhost:35729/livereload.js"></script>
54+
</body>
55+
56+
</html>

0 commit comments

Comments
 (0)