dynamic/SilverStripe-Locator-Module

View on GitHub
thirdparty/jquery-store-locator-plugin/bootstrap-example.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html>
  <head>
    <title>Map Example</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-example.min.css" />
  </head>

  <body>

        <div class="bh-sl-container container-fluid">
            <div class="jumbotron">
                <div class="container">
                    <h1 class="bh-sl-title">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 class="bh-sl-form-container">
                        <form id="bh-sl-user-location" class="form-inline" method="post" action="#" role="form">
                            <div class="form-input form-group">
                                <label for="bh-sl-address">Enter Address or Zip Code:</label>
                                <input class="form-control" type="text" id="bh-sl-address" name="bh-sl-address" />
                            </div>

                            <button id="bh-sl-submit" class="btn btn-primary" type="submit">Submit</button>
                        </form>
                    </div>
                </div>
            </div>

            <div id="bh-sl-map-container" class="bh-sl-map-container">
                <div class="row">
                    <div id="map-results-container" class="container">
                        <div id="bh-sl-map" class="bh-sl-map col-md-9"></div>
                        <div class="bh-sl-loc-list col-md-3">
                            <ul class="list list-unstyled"></ul>
                        </div>
                    </div>
                </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="assets/js/libs/handlebars.min.js"></script>
    <script src="https://maps.google.com/maps/api/js"></script>
    <script src="assets/js/plugins/storeLocator/jquery.storelocator.js"></script>
      <script>
        $(function() {
                    $('#bh-sl-map-container').storeLocator({
                        'mapSettings' : {
                            zoom : 12,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            disableDoubleClickZoom: true,
                            scrollwheel: false,
                            navigationControl: false,
                            draggable: false
                        }
                    });
        });
      </script>

  </body>
</html>