jQuery-Store-Locator-Plugin/maxdistance-example.html at master · lemonchad/jQuery-Store-Locator-Plugin · GitHub

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
<!DOCTYPE html>
<html>
  <head>
    <title>Map Example - Maximum Distance</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/map.css" />
  </head>

  <body>

    <div id="store-locator-container">
      <div id="page-header">
        <h1>Using Chipotle as an Example</h1>
        <p>I used locations around Minneapolis and the southwest suburbs. So, for example, Edina, Plymouth, Eden Prarie, etc. would be good for testing the functionality.
        You can use just the city as the address - ex: Edina, MN.</p>
      </div>

      <div id="form-container">
        <form id="user-location" method="post" action="#">
            <div id="form-input">
              <label for="address">Enter Address or Zip Code:</label>
              <input type="text" id="address" name="address" />
              <select id="maxdistance" name="maxdistance">
                <option value="10">10 Miles</option>
                <option value="20">20 Miles</option>
                <option value="30">30 Miles</option>
                <option value="40">40 Miles</option>
              </select>
             </div>

            <button id="submit" type="submit">Submit</button>
        </form>
      </div>

      <div id="map-container">
        <div id="loc-list">
            <ul id="list"></ul>
        </div>
        <div id="map"></div>
      </div>
    </div>

    <div id="distances"></div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/handlebars-1.0.0.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="js/jquery.storelocator.js"></script>
      <script>
        $(function() {
          $('#map-container').storeLocator({'maxDistance': true});
        });
      </script>

  </body>
</html>