bjorn2404 / jQuery-Store-Locator-Plugin

A store locator plugin using Google Maps API version 3
MIT License
495 stars 235 forks source link

Map not showing #106

Closed tibor closed 8 years ago

tibor commented 8 years ago

Hi,

at first a big thanks for your work; the plugin works like a charm. Unfortunately the map isn’t showing up in my project.

I’ve added the following markup to my project

 <link rel="stylesheet" type="text/css" href="assets/css/storelocator.css">
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

        <script src="assets/js/libs/handlebars.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
        <script src="assets/js/plugins/storeLocator/jquery.storelocator.js"></script>
        <script>
 $(function() {
                $('#bh-sl-map-container').storeLocator({
                    'slideMap' : false,
                    'defaultLoc': true,
                    'defaultLat': '47.4124000',
                    'defaultLng' : '9.7437900',
                    'lengthUnit': 'km',
                    'mapSettings' : {
                            zoom : 12,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            disableDoubleClickZoom: true,
                            scrollwheel: false,
                            navigationControl: false,
                            draggable: false
                        }
                });
            });
</script>

and

 <div class="bh-sl-form-container">
        <form id="bh-sl-user-location" method="post" action="#">
            <div class="form-input">
              <label for="bh-sl-address">Bitte Adresse oder Postleitzahl eingeben:</label>
              <input type="text" id="bh-sl-address" name="bh-sl-address" />
            </div>

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

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

Do I need to add anything else?

The console shows following error:

util.js:220 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Another question: where may I change the label “Directions” into “Route” and is it possible to echo the distance with a comma instead of a point?

Regards

Tibor

bjorn2404 commented 8 years ago

Yes, it appears you are missing the outermost container:

<div class="bh-sl-container">

Please see the Handlebars templates in dist/assets/js/plugins/storeLocator/templates/