/
map.html
executable file
·329 lines (313 loc) · 16.1 KB
/
map.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Map with jQuery UI Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A preview of the jQuery UI Bootstrap theme.">
<meta name="author" content="Addy Osmani">
<!-- Le styles -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom-theme/jquery-ui-1.10.3.custom.css">
<!--<link rel="stylesheet" href="css/custom-theme/jquery-ui-1.10.3.theme.css">-->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/custom-theme/jquery.ui.1.10.3.ie.css">
<![endif]-->
<link rel="stylesheet" href="assets/css/docs.css">
<link rel="stylesheet" href="assets/js/google-code-prettify/prettify.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/vendor/html5shiv.js" type="text/javascript"></script>
<script src="assets/js/vendor/respond.min.js" type="text/javascript"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
<!-- googlemap -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=weather" type="text/javascript"></script>
<!-- End googlemap -->
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar" data-twttr-rendered="true">
<!-- Navbar
================================================== -->
<header class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://github.com/addyosmani/jquery-ui-bootstrap">jQuery UI Bootstrap</a>
</div>
<nav class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="./index.html">Home</a>
</li>
<li>
<a href="./components.html">Components</a>
</li>
<li>
<a href="./extra.html">Extra</a>
</li>
<li class="active">
<a href="./map.html">Map</a>
</li>
<li>
<a href="http://github.com/addyosmani/jquery-ui-bootstrap/issues">Feedback/Issues</a>
</li>
<li>
<a href="http://twitter.com/addyosmani">Contact</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Switch Theme <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./index.html">Default Bootstrap Theme (Non LESS'd)</a></li>
<li><a href="theme/united/index.html">United Theme via Bootswatch (LESS'd)</a></li>
<li><a href="theme/base/index.html">Default Bootstrap Theme (LESS'd)</a></li>
</ul>
</li>
</ul>
<div id="twitter-share" class="navbar-right">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://addyosmani.github.com/jquery-ui-bootstrap/" data-text="A new jQuery UI Bootstrap theme" data-via="addyosmani" data-size="large">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</nav>
</div>
</header>
<!-- Subhead
================================================== -->
<header class="bs-header" id="overview">
<div class="container">
<h1>jQuery UI Bootstrap</h1>
<p class="lead">A Bootstrap-themed kickstart for jQuery UI widgets (v1.0 alpha).</p>
</div>
</header>
<div class="container" id="layout">
<!-- Docs nav ================================================== -->
<div class="row">
<div class="col-lg-3 col-sm-3" id="sidebar">
<div class="bs-sidebar hidden-print" role="complementary">
<ul class="nav bs-sidenav">
<li><a href="#block-map"><i class="icon-chevron-right"></i> Map</a></li>
<li><a href="#block-accordion"><i class="icon-chevron-right"></i> Accordion</a></li>
<li><a href="#block-tabs"><i class="icon-chevron-right"></i> Tabs</a></li>
</ul>
</div>
</div>
<div class="col-lg-9 col-sm-9" id="article">
<section id="block-map">
<div class="page-header">
<h1>Demo map</h1>
</div>
<p class="docs-lead">
<a href="http://www.gmap3.net">GMap3</a> allows you to finely manipulate yours markers and others objects, to associate custom data usable in each event.
<br />This is an example of using jQuery UI Bootstrap with <a href="http://www.gmap3.net">gmap3</a>.
</p>
</section>
<!-- Accordion gmap3 ================================================== -->
<section id="block-accordion">
<div class="page-header">
<h1>Accordion</h1>
</div>
<div id="gmap3" class="col-lg-5 col-sm-5"></div>
<div class="col-lg-7 col-sm-7">
<div id="accordion-map">
<h3>Paris</h3>
<div>
<p>
Paris is the capital and largest city of France. <br />
It is situated on the river Seine, in northern France, at the heart of the Île-de-France region. <br />
The city of Paris, within its administrative limits (the 20 arrondissements), has a population of about 2,230,000. <br />
Its metropolitan area is one of the largest population centres in Europe, with more than 12 million inhabitants.
<br /><br />
<a href="http://en.wikipedia.org/wiki/Paris" target="_blank">Paris on Wikipedia</a>
</p>
</div>
<h3>Poitiers</h3>
<div>
<p>
Poitiers is a city on the Clain river in west central France. <br />
It is a commune and the capital of the Vienne department and of the Poitou-Charentes region. <br />
The centre is picturesque and its streets are interesting for predominant remains of historical architecture, especially from the Romanesque period. <br />
Two major military battles occurred near the city: in 732, the Battle of Poitiers (also known as the Battle of Tours), in which the Franks commanded by Charles Martel halted the expansion of the Umayyad Caliphate, and in 1356, the Battle of Poitiers, a key victory for English forces during the Hundred Years' War.
<br /><br />
<a href="http://en.wikipedia.org/wiki/Poitiers" target="_blank">Poitiers on Wikipedia</a>
</p>
</div>
<h3>Perpignan</h3>
<div>
<p>
Perpignan is a city, a commune and the capital of the Pyrénées-Orientales department in southern France. <br />
Perpignan was the capital of the former province and county of Roussillon (Rosselló in Catalan) and continental capital of the Kingdom of Majorca in the 13th and 14th centuries. <br />
As of 2009, Perpignan had 120,100 inhabitants (Perpignanais, Perpinyanés) in the city proper. The metropolitan area has a total population of 300,221 in 2009.
<br /><br />
<a href="http://en.wikipedia.org/wiki/Perpignan" target="_blank">Perpignan on Wikipedia</a>
</p>
</div>
</div>
</div>
<div class="clearfix"></div>
<br />
<pre class="prettyprint linenums">
function selectCity(index, updateAccordion) {
if (updateAccordion) {
$( "#accordion-map" ).accordion("option", "active", index);
}
$('#gmap3').gmap3({
exec: {
name: "marker",
all:"true",
func: function(value){
// data.object is the google.maps.Marker object
if (value.data.index === index) {
value.object.setIcon("http://maps.google.com/mapfiles/marker_green.png");
} else {
value.object.setIcon("http://maps.google.com/mapfiles/marker.png");
}
}
}
});
}
$(function(){
//##### Accordion with gmap3
$( "#accordion-map" ).accordion({
header: "h3",
activate: function(event, ui) {
// index / 2 because of the 2 elements by set (h3 + div)
selectCity(ui.newHeader.index() / 2);
}
});
$('#gmap3').gmap3({
map:{
options:{
center:[46.578498,2.457275],
zoom: 5
}
},
marker:{
values:[
{latLng:[48.8620722, 2.352047], data: {index: 0},
options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}
},
{address:"86000 Poitiers, France", data: {index: 1}},
{address:"66000 Perpignan, France", data: {index: 2}}
],
options:{
draggable: false
},
events:{
click: function (marker, event, context) {
selectCity(context.data.index, true);
}
}
}
});
});
</pre>
</section>
<!-- Tabs gmap3 ================================================== -->
<section id="block-tabs">
<div class="page-header">
<h1>Tabs</h1>
</div>
<div id="tabs">
<ul>
<li><a href="#classic">Classic</a></li>
<li><a href="#weather">Weather</a></li>
<li><a href="#tabs-3">Text</a></li>
</ul>
<div id="classic" class="col-lg-12 col-sm-12 gmap3"></div>
<div id="weather" class="col-lg-12 col-sm-12 gmap3"></div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
<div class="clearfix"></div>
<pre class="prettyprint linenums">
// invoque google maps on 2 divs
$(".gmap3").gmap3({
map: {
options: {
zoom: 6,
center: [49.265984, -123.127491],
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}
});
// Append the meteo layer on weather map
var map = $("#weather").gmap3("get");
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
// force maps to refresh on show
$("#tabs").tabs({
activate: function(event, ui) {
if (ui.newPanel.hasClass("gmap3")) {
ui.newPanel.gmap3({trigger: "resize"});
}
}
});
</pre>
</section>
</div>
</div>
</div>
<!-- Footer
================================================== -->
<footer class="bs-footer">
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-3">
<h3><span class="icon-envelope"></span> Contact</h3>
<ul class="icons">
<li><i class="icon-link"></i> Blog: <a class="targetblank" href="http://addyosmani.com/blog/">Addy Osmani</a></li>
<li><i class="icon-twitter"></i> Twitter: <a class="targetblank" href="https://twitter.com/addyosmani">@addyosmani</a></li>
<li><i class="icon-github"></i> Github: <a class="targetblank" href="https://github.com/addyosmani/jquery-ui-bootstrap/issues?state=open">Issues</a></li>
</ul>
</div>
<div class="col-lg-4 col-sm-4">
<h3><span class="icon-group"></span> Team</h3>
<ul class="list-unstyled">
<li>Lead Product Developer : <a class="targetblank" href="http://addyosmani.com/blog/" hreflang="en">Addy Osmani</a></li>
<li>Chief Maintainer : <a class="targetblank" href="http://blog.aurelien-gerits.be" hreflang="fr">Aurélien Gérits</a></li>
</ul>
</div>
<div class="col-lg-5 col-sm-5">
<h3><span class="icon-lightbulb"></span> Credits</h3>
<ul class="list-unstyled">
<li>jQuery UI Bootstrap © <strong class="text-info">Addy Osmani</strong> 2012 - 2013.</li>
<li>Bootstrap © <strong class="text-info">Twitter, Inc.</strong> 2012 - 2013</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/vendor/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="assets/js/vendor/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/js/vendor/bootstrap.js" type="text/javascript"></script>
<script src="assets/js/vendor/holder.js" type="text/javascript"></script>
<script src="assets/js/vendor/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="assets/js/google-code-prettify/prettify.js" type="text/javascript"></script>
<script src="assets/js/docs.js" type="text/javascript"></script>
<!--gmap3-->
<script src="third-party/gmap3/gmap3.min.js" type="text/javascript"></script>
<!--End gmap3-->
<script src="assets/js/demo-map.js" type="text/javascript"></script>
</body>
</html>