Vosegus Sakura

  1. Home
  2. JavaScript { Depository; }
  3. Google の API をつかってみる

Google の API をつかってみる

JavaScript { Depository; }

Google Maps JavaScript API V3 をつかってみる

使用API
Google Maps JavaScript API V3
リクルート WEBサービス

仕様

飲食店の店舗情報を、住所(必須)、キーワードから検索。

検索結果は地図上に場所が表示され、店舗の情報は地図とは別の領域に表示される。

住所情報を基におおよその場所が特定され、その地点から一番近い店舗までの徒歩での経路を地図とは別の領域に表示。

その他の店舗も 100 件までがマーカーで表示され、マーカーをクリックすると、その店舗への経路と情報を表示。

デモ : Google Maps JavaScript API V3 をつかった飲食店検索インターフェース - 検証ブラウザ Chrome Firefox Safari

このページの上部へ

Google AJAX Feed API をつかってみる

使用API
Google AJAX Feed API

デモ

レスポンスへのアクセス構造

プロパティレスポンス
result.feed.titleフィードのタイトル
result.feed.linkサイトのURI
result.feed.descriptionフィードの概要
result.feed.authorフィードの著者
result.feed.entries[n].title記事のタイトル
result.feed.entries[n].link記事のURI
result.feed.entries[n].contentSnippet記事のが異様
result.feed.entries[n].publishedDate記事の公開日
result.feed.entries[n].categories記事のカテゴリ

JavaScrip

google.load("feeds", "1");//フィード API の バージョン 1 を読み込む function initialize() { var feed = new google.feeds.Feed("http://www.skyld.net/blog/atom.xml");//FeedのURI feed.load(function(result) { if (!result.error) { var container = document.getElementById("demo");//出力するブロクのID //フィードのタイトル取得 var h3 = document.createElement("h3"); var headAnchor = document.createElement("a"); headAnchor.setAttribute("href",result.feed.link); headAnchor.appendChild(document.createTextNode(result.feed.title)); h3.appendChild(headAnchor); container.appendChild(h3); //フィードの概要取得 var p = document.createElement("p"); p.appendChild(document.createTextNode(result.feed.description)); container.appendChild(p); //記事の取得 for (var i = 0; i < result.feed.entries.length; i+=1) { var entry = result.feed.entries[i]; var ul = document.createElement("ul"); var li = document.createElement("li"); var a = document.createElement("a"); a.setAttribute("href",entry.link); a.appendChild(document.createTextNode(entry.title)); li.appendChild(a); ul.appendChild(li); container.appendChild(ul); } } }); } google.setOnLoadCallback(initialize);

このページの上部へ

このページの上部へ