Skip to content
This repository was archived by the owner on May 25, 2019. It is now read-only.

Commit 254939a

Browse files
author
Dean Sofer
committed
docs: Stubbing out some rudimentary docs from old demo site
1 parent be3c9c5 commit 254939a

3 files changed

Lines changed: 206 additions & 0 deletions

File tree

‎demo/demo.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#map_canvas {
2+
height: 200px;
3+
}

‎demo/index.html‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<!DOCTYPE html>
2+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4+
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
5+
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6+
<head>
7+
<meta charset="utf-8">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9+
<title>AngularUI - Google Maps Demo</title>
10+
<base href=".."></base>
11+
<link href="demo/demo.css" rel="stylesheet" />
12+
<script src="components/angular/angular.js"></script>
13+
<script src="components/angular-ui-utils/modules/event/event.js"></script>
14+
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
15+
<script src="src/map.js"></script>
16+
</head>
17+
<body ng-app="ui.map">
18+
<script>
19+
function MapCtrl($scope) {
20+
$scope.myMarkers = [];
21+
22+
$scope.mapOptions = {
23+
center: new google.maps.LatLng(35.784, -78.670),
24+
zoom: 15,
25+
mapTypeId: google.maps.MapTypeId.ROADMAP
26+
};
27+
28+
$scope.addMarker = function($event) {
29+
$scope.myMarkers.push(new google.maps.Marker({
30+
map: $scope.myMap,
31+
position: $event.latLng
32+
}));
33+
};
34+
35+
$scope.setZoomMessage = function(zoom) {
36+
$scope.zoomMessage = 'You just zoomed to '+zoom+'!';
37+
console.log(zoom,'zoomed');
38+
};
39+
40+
$scope.openMarkerInfo = function(marker) {
41+
$scope.currentMarker = marker;
42+
$scope.currentMarkerLat = marker.getPosition().lat();
43+
$scope.currentMarkerLng = marker.getPosition().lng();
44+
$scope.myInfoWindow.open($scope.myMap, marker);
45+
};
46+
47+
$scope.setMarkerPosition = function(marker, lat, lng) {
48+
marker.setPosition(new google.maps.LatLng(lat, lng));
49+
};
50+
}
51+
</script>
52+
<section id="directives-map" ng-controller="MapCtrl">
53+
<div class="page-header">
54+
<h1>
55+
Google Maps
56+
<small><a href="https://developers.google.com/maps/documentation/javascript/tutorial#api_key">Google API Documentation</a></small>
57+
</h1>
58+
</div>
59+
<div class="well">
60+
<div class="row">
61+
<div class="span3">
62+
<h4>Click to add a marker!</h4>
63+
<p>{{zoomMessage}}</p>
64+
<ul>
65+
<li ng-repeat="marker in myMarkers">
66+
<a class="btn" ng-click="myMap.panTo(marker.getPosition())">
67+
Pan to Marker {{$index}}
68+
</a>
69+
</li>
70+
</ul>
71+
72+
<!-- this is the confusing part. we have to point the map marker directive
73+
at an existing google.maps.Marker object, so it can hook up events -->
74+
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
75+
ui-event="{'click': 'openMarkerInfo(marker)'}">
76+
</div>
77+
78+
<div ui-map-info-window="myInfoWindow">
79+
<h1>Marker</h1>
80+
Lat: <input ng-model="currentMarkerLat">, Lng: <input ng-model="currentMarkerLng">
81+
<a class="btn btn-primary" ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
82+
</div>
83+
</div>
84+
85+
<!--Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
86+
google maps-->
87+
<div id="map_canvas" ui-map="myMap" class="span8 map"
88+
ui-event="{'click': 'addMarker($event)', 'zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
89+
ui-options="mapOptions">
90+
</div>
91+
</div>
92+
</div>
93+
<h3>How?</h3>
94+
<p class="alert alert-info"><i class="icon-info-sign"></i> Remember that you can pass a variable containing an object to <code>ui-event</code></p>
95+
<pre class="prettyprint linenums" ng-non-bindable>
96+
&lt;h4&gt;Click to add a marker!&lt;/h4&gt;
97+
&lt;p&gt;{{zoomMessage}}&lt;/p&gt;
98+
&lt;ul&gt;
99+
&lt;li ng-repeat=&quot;marker in myMarkers&quot;&gt;
100+
&lt;a ng-click=&quot;myMap.panTo(marker.getPosition())&quot;&gt;Pan to Marker {{$index}}&lt;/a&gt;
101+
&lt;/li&gt;
102+
&lt;/ul&gt;
103+
104+
&lt;!-- this is the confusing part. we have to point the map marker directive
105+
at an existing google.maps.Marker object, so it can hook up events --&gt;
106+
&lt;div ng-repeat=&quot;marker in myMarkers&quot; ui-map-marker=&quot;myMarkers[$index]&quot;
107+
ui-event=&quot;{&#x27;click&#x27;: &#x27;openMarkerInfo(marker)&#x27;}&quot;&gt;
108+
&lt;/div&gt;
109+
110+
&lt;div ui-map-info-window=&quot;myInfoWindow&quot;&gt;
111+
&lt;h1&gt;Marker&lt;/h1&gt;
112+
Lat: &lt;input ng-model=&quot;currentMarkerLat&quot;&gt;, Lng: &lt;input ng-model=&quot;currentMarkerLng&quot;&gt;
113+
&lt;a ng-click=&quot;setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)&quot;&gt;Set Position&lt;/a&gt;
114+
&lt;/div&gt;
115+
116+
&lt;!-- Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
117+
google maps --&gt;
118+
&lt;div id=&quot;map_canvas&quot; ui-map=&quot;myMap&quot; class=&quot;map&quot;
119+
ui-event=&quot;{&#x27;click&#x27;: &#x27;addMarker($event)&#x27;, &#x27;zoom_changed&#x27;: &#x27;setZoomMessage(myMap.getZoom())&#x27; }&quot;
120+
ui-options=&quot;mapOptions&quot;&gt;
121+
&lt;/div&gt;
122+
123+
&lt;script&gt;
124+
$scope.myMarkers = [];
125+
126+
$scope.mapOptions = {
127+
center: new google.maps.LatLng(35.784, -78.670),
128+
zoom: 15,
129+
mapTypeId: google.maps.MapTypeId.ROADMAP
130+
};
131+
132+
$scope.addMarker = function($event) {
133+
$scope.myMarkers.push(new google.maps.Marker({
134+
map: $scope.myMap,
135+
position: $event.latLng
136+
}));
137+
};
138+
139+
$scope.setZoomMessage = function(zoom) {
140+
$scope.zoomMessage = &#x27;You just zoomed to &#x27;+zoom+&#x27;!&#x27;;
141+
console.log(zoom,&#x27;zoomed&#x27;)
142+
};
143+
144+
$scope.openMarkerInfo = function(marker) {
145+
$scope.currentMarker = marker;
146+
$scope.currentMarkerLat = marker.getPosition().lat();
147+
$scope.currentMarkerLng = marker.getPosition().lng();
148+
$scope.myInfoWindow.open($scope.myMap, marker);
149+
};
150+
151+
$scope.setMarkerPosition = function(marker, lat, lng) {
152+
marker.setPosition(new google.maps.LatLng(lat, lng));
153+
};
154+
&lt;/script&gt;
155+
156+
&lt;style&gt;
157+
.map {
158+
height: 400px;
159+
width: 600px;
160+
}
161+
&lt;/style&gt;
162+
</pre>
163+
</section>
164+
</body>
165+
166+
</html>

‎gruntFile.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
module.exports = function (grunt) {
2+
3+
grunt.loadNpmTasks('grunt-karma');
4+
grunt.loadNpmTasks('grunt-contrib-jshint');
5+
6+
// Default task.
7+
grunt.registerTask('default', ['jshint', 'karma']);
8+
9+
var testConfig = function(configFile, customOptions) {
10+
var options = { configFile: configFile };
11+
var travisOptions = process.env.TRAVIS && { browsers: ['Firefox'], reporters: ['dots'] };
12+
return grunt.util._.extend(options, customOptions, travisOptions);
13+
};
14+
15+
// Project configuration.
16+
grunt.initConfig({
17+
karma: {
18+
unit: testConfig('test/karma.conf.js')
19+
},
20+
jshint:{
21+
all:['ui-codemirror.js', 'gruntFile.js','test/**/*.js'],
22+
options:{
23+
curly:true,
24+
eqeqeq:true,
25+
immed:true,
26+
latedef:true,
27+
newcap:true,
28+
noarg:true,
29+
sub:true,
30+
boss:true,
31+
eqnull:true,
32+
globals:{}
33+
}
34+
}
35+
});
36+
37+
};

0 commit comments

Comments
 (0)