スポンサードリンク

Tag Archives: 検索ボックス

Google Maps API v3 ローカルサーチ(Local search)用検索フォーム(ボックス)を地図に埋め込む

◆ Google Maps API v3 用地図でローカルサーチ(Local search)用の検索ボックス

V3用で困っていたローカルサーチ(LocalSearch)用の検索ボックス(検索バー)やっと使えるようになったらしい。

正確には、「A GoogleBar-like control for GMaps API v3」

待ちに待った「gmaps-api-v3-googlebar」のファイルをダウンロードしてみる。試しに地図に埋め込むと、おおっV2と変わらずに検索できる。

ちょいとアイコンが変わったか?

あれ、検索数が少ない?・・・と思ってV2とV3を比較してみたが、検索結果は同じ、V3の方が検索後に地図が少し広域になる?ための錯覚かな。ともあれ、満足。

マップ内の検索機能がないとV3への全面移行に踏み切れなかったのでとってもで嬉しい。

Read more »

Web(ウェブ)タブ検索ボックス/Google AJAX Search API サンプル

◆サンプル


 

Loading…


◆下記をコピー

<!– Google AJAX Search API キー –>

<script src=”http://www.google.com/uds/api?file=uds.js&v=1.0&key=あなたのGoogle AJAX Search APIキー” type=”text/javascript” charset=”utf-8″></script>
<!– 検索結果表示スタイルシート –>

表示を変えたければ、CSSをダウンロードして書き換え方。デフォルト幅は、.gsc-control {  width: 300px;}

<link href=”http://www.google.com/uds/css/gsearch.css” rel=”stylesheet” type=”text/css” />
<!– HTML記述 –>
<div id=”search_control_tabbed”>Loading…</div>
<!– 検索結果タブ設定 –>
<script type=”text/javascript”>
// <![CDATA[
google.load(‘search’, ‘1.0’);
function OnLoad() {
// create a tabbed mode search control
var tabbed = new google.search.SearchControl();
tabbed.setResultSetSize(google.search.Search.LARGE_RESULTSET);
tabbed.addSearcher(new google.search.ImageSearch());
tabbed.addSearcher(new google.search.VideoSearch());
tabbed.addSearcher(new google.search.WebSearch());
tabbed.addSearcher(new google.search.BlogSearch());
tabbed.addSearcher(new google.search.BookSearch());
tabbed.addSearcher(new google.search.NewsSearch());
// draw in tabbed layout mode
var drawOptions = new google.search.DrawOptions();         drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);         tabbed.draw(document.getElementById(“search_control_tabbed”), drawOptions);
tabbed.execute(“フェラーリ“);       }
google.setOnLoadCallback(OnLoad, true);
// ]]></script>

広告表示が無いLocal Search(Google ローカル検索)窓(バー)をGoogle AJAX Search APIで追加する。

V3用検索Google barは、コチラ

前回のローカル検索バーサンプルでは、広告が表示されるのが気に食わなかったので探してみたのが、今回のローカル検索。

Google AJAX Search APIを使用しますのでちょいと手間。ですが広告は表示されなくなりスッキリ。

今回のGoogle Maps API作業は、次の作成。

  1. Google Maps APIキー以外に、新たにGoogle AJAX Search APIキーを入手し、Google Maps APIキーと併せてHTMLへ記述しておきます。APIキーは、ここの”Google AJAX Search API の使用を開始する”で入手。
  2. さらに、スタイルシートなんぞの記述もHTML header内への記述が必要です。
  3. 併せて、距離スケール定規が隠れてしまっているので、var positionを指定して、Google検索窓の表示位置も地図左下から右下に変えてみましょうかね。

Read more »

スポンサードリンク