ジキルを使用して店舗ロケータを構築する

Question

私は現在Jekyll 3.30を使用していますが、店舗ロケータをビルドしようとしています。私は現在の機能性について計画しています。

1. ロケータページに郵便番号/郵便番号で
2. 種類マイル離れ
3. 選択数ゴーズ - 最初に最も近い店舗のの> 20マイル/ 40マイル/ 60マイル
4. 一覧結果を。

私の質問は、Googleジオコードサービスを使用しているときに照会する場所を保存するにはどうすればよいですか？

_dataフォルダ内の場所をJSONとして保存することはできますか？

また、場所を窮地に陥るような場所に格納してから、ajax経由で検索する方がよいでしょうか？

編集：

だから私は、JSONへのデータファイルからデータを取得し、Googleマップにそれを餌と距離を返すことができました。しかし、元のアイテムに距離を戻すにはどうすればいいですか？

//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

ウェブリソース（jsonファイル）を処理できるものはすべてokになります。あなたはそれ

にデータをロードするときには、何のクロスドメインの問題を自分のWebページと同じURLを持っていないので、考え

1. ：

   しかし、ジキルとそれを提供することは私の意見では2つの利点を持っているでしょう

jsonを手動で書き込まないようにするには、_postにストアを格納し、液体テンプレートを使用してjsonファイルを生成することができます。

が

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

あなたのJSONテンプレートは次のようになります（申し訳ありませんが、私の例では、JSONPですが、あなたのアイデアを得るでしょう）：：

--- 
--- 
{% 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 %} 
]); 

で

あなたの投稿はYAMLヘッダなどのメタデータを持っていますこの例では、場所（あなたの店舗）は_post/youtubeフォルダにあり、_config.ymlは 'タイプ'（他の投稿からそれらを単一にする）を提供します。

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

あなたは考えを取ることができますhttps://github.com/franceimage/franceimage.github.io