-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·102 lines (98 loc) · 3.83 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Store Locator Library for Maps API</title>
<style type="text/css">
@import 'https://developers.google.com/_static/css/screen-docs.css';
body {
padding: 1em;
max-width: 60em;
min-width: inherit;
}
p {
margin: 0.75em 0;
}
</style>
</head>
<body>
<h1 class="page-title">Store Locator Library for Maps API</h1>
<p>
This library enables developers to easily build store locator-type
applications using the Google Maps API.
</p>
<p>The library provides the following features:</p>
<ul>
<li>Pluggable data source – display stores from a data source of
your choosing</li>
<li>HTML5 Geolocation – determines a good initial viewport for the
user</li>
<li>Info window – shows details about a store</li>
<li>Street View</li>
<li>Extensible – customise your own markers, info windows, etc.</li>
<li>Fully-featured side panel, providing:
<ul>
<li>Feature filtering</li>
<li>Autocomplete search</li>
<li>List of nearby stores</li>
<li>Directions</li>
</ul>
</li>
</ul>
<h2>Examples/Demos</h2>
<p>
The best way to become acquainted with the library is to see some of the
examples:
</p>
<ol>
<li><a href="examples/panel.html">panel.html</a> – A simple store
locator, including panel. Data is fetched from a static CSV file.</li>
<li><a href="examples/dynamic.html">dynamic.html</a> – Same as
above, except stores are fetched dynamically from a JSONP web service.
</li>
<li><a href="examples/gme.html">gme.html</a> – Same as
above, except stores are fetched dynamically from Google Maps Engine.
</li>
<li><a href="examples/custom.html">custom.html</a> – Various
customisations to the default UI including custom markers and info
window.</li>
<li><a href="examples/places.html">places.html</a> – Places are
searched using the Google Places API, and displayed as a store
locator.</li>
</ol>
<h2>Reference documentation</h2>
<p>
For detailed documentation on the library, including classes, events and
sample usage, please see the <a href="reference.html">reference
documentation</a>.
</p>
<h2>Quick Start</h2>
<p>
To get started, include the <a href="dist/store-locator.min.js">
<code>store-locator.min.js</code></a> file on your HTML page. A
set of <a href="css/storelocator.css">CSS styles</a> are also available,
which provide styling for store details and side panel.
</p>
<p>
The library's functions are contained under the <code>storeLocator</code>
namespace. The main class is called <code>storeLocator.View</code>. A
<code>View</code> has two required parameters, a
<code>google.maps.Map</code>, and a <code>storeLocator.DataFeed</code>.
</p>
<p>
A <code>DataFeed</code> is an object with the function
<code>getStores</code>. This function is called each time the map needs an
update. A simple example of a <code>DataFeed</code> can be found in the
<a href="reference.html#storeLocator.DataFeed">reference</a>.
</p>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12846745-17']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>