WordPressにGoogle Maps API V3！

＜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検索窓の表示位置も地図左下から右下に変えてみましょうかね。

うまくいけば、Google Maps に検索窓が追加され、広告なしで周辺のレストランとか検索表示可能です。また、表示位置もMap（地図）右下に移動し、距離スケール定規も隠れなくなりました。

◆HTML Header部への記述サンプル

<title>地図にGoogleのローカル検索窓を追加表示させる。</title>

<meta name=”keywords” content=”アイコン,マーカー” />

<meta name=”description” content=”ローカル検索窓を追加する” />

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=あなたのGoogle Maps APIキー” type=”text/javascript” charset=”utf-8″></script>

<script src=”http://www.google.com/uds/api?file=uds.js&v=1.0&key=あなたのAJAX APIキー” type=”text/javascript” charset=”utf-8″></script>

<script src=”http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js” type=”text/javascript”></script>

<link href=”http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css” rel=”stylesheet” type=”text/css” />

<link href=”http://www.google.com/uds/css/gsearch.css” rel=”stylesheet” type=”text/css” />

</head>

◆HTMLへの追加記述

◆Google AJAX Search APIでLocal Search（Google ローカル検索）窓（バー）を追加したサンプル

スポンサードリンク