Building a store locator using Jekyll

Question

I am currently using Jekyll 3.30 and I am looking to build a store locator. I am planning on the current functionality.

1. Goes to the Locator page
2. Types in Zipcode / Postal code
3. Selects Number of Miles Away -> 20 Miles / 40 Miles / 60 Miles
4. List results of of stores that are closest first.

Now my question is how is the best way to store the locations to query against when using the google geocode service?

Is it possible to store the locations in the _data folder as JSON?

Or is it better to store the locations in a place like contenful and then retrieve them via ajax?

Edit:

So i have been able to pull data from the data file into json and feed it into the google maps and return the distance. But how do I assign the distance back to the original item?

//zipcode
var origin = '50539'

// list of locations
var destination = {{site.data.store | jsonify}}

//loop through and return the distance of each object
for (var i = 0; i < destination.length; i++ ){

var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({origins: [origin],destinations: [destination[i].storeaddress],travelMode: 'DRIVING', unitSystem: google.maps.UnitSystem.IMPERIAL}, callback);

    function callback (response,status) {

    var distance = response.rows["0"].elements["0"].distance.text;
    var store = destination;
    console.log(distance + store[i].storename);

  }
}

Answer 1

Anything that can serve a web resource (your json file) will be ok.

However, serving it with jekyll would have 2 advantages in my opinion:

1. It would have the same url as your web page, so, no cross domain problem when you load it
2. The data would be in the same code repository as your application

To avoid writing the json manually, you can store your stores in _post and use liquid templating to generate the json file.

Your posts have metadata in the yaml header such as:

---
guid: "3f8bf46a9c21"
title: "Mont Lozère"
latlng: "44.425962, 3.739340"
youtubeId: "0OHCYmOMZmg" 
---

Your json template would look like (sorry my example is jsonp but you will get the idea):

---
---
{% assign posts = site.posts | where:"type", "youtube" %}
/* Number of places: {{ posts | size }} */
processJSON([
  {% for post in posts %}
    {
      "guid": "{{ post.guid }}",
      "title": "{{ post.title }}",
      "latlng": "{{ post.latlng }}",
      "youtubeId": "{{ post.youtubeId }}"
    }
    {% unless forloop.last %},{% endunless %}
  {% endfor %}
]);

In this example, the locations (your stores) are located in the folder _post/youtube and the _config.yml provides the 'type' (to single them from the other posts)

defaults:
  - scope:
      path: "_posts/youtube"
    values:
      type: "youtube"

You can take ideas from https://github.com/franceimage/franceimage.github.io