地図検索API

Google Maps JavaScript API v2はもうサポートされないため、v3への移行が必要です。Upgrading Your Google Maps JavaScript Application To v3 - Google Maps JavaScript API v2 (No Longer Available) — Google Developers

地図検索コントロール (Map Search Control)

実行例

Loading...

サンプルコード

<!-- AJAX Search APIのライブラリを読み込む -->
<script type="text/javascript" src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=xx"></script>

<!-- Maps APIのライブラリを読み込む -->
<script type="text/javascript" src="https://maps.google.com/maps?file=api&v=2&sensor=false&key=xx"></script>

<!-- Map Search Controlを読み込む -->
<script type="text/javascript" src="http://uds.googleusercontent.com/uds/solutions/mapsearch/gsmapsearch.js"></script>

<!-- AJAX Searchのスタイルシートを読み込む -->
<link rel="stylesheet" type="text/css" href="http://www.google.com/uds/css/gsearch.css" />

<!-- Map Searchのスタイルシートを読み込む -->
<link rel="stylesheet" type="text/css" href="http://uds.googleusercontent.com/uds/solutions/mapsearch/gsmapsearch.css" />

<style type="text/css">
#search-control {
  width : 500px;
  margin: 5px;
}

/* アクティブ状態の地図 */
.gsmsc-mapDiv {
  height : 250px;
  border: 2px red solid;
}

/* アイドル状態の地図 */
.gsmsc-idleMapDiv {
  height : 250px;
  border: 2px green solid;
}
</style>

<div id="search-control">Loading...</div>

<script type="text/javascript">
function OnLoad()
{
  var options = {
      title : '東京都庁',                  // 地図が示す場所のタイトル
      url : 'http://www.metro.tokyo.jp/',  // タイトルからリンクを張るURL
      zoomControl : GSmapSearchControl.ZOOM_CONTROL_ENABLE_ALL,  // アイドル状態での制御を有効
      idleMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM,          // アイドル状態での縮尺の制御を有効
      activeMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM,        // アクティブ状態での縮尺の制御を有効
      mapTypeControl : GSmapSearchControl.MAP_TYPE_ENABLE_ALL,   // 地図種類の選択を有効
      showResultList : GSmapSearchControl.DEFAULT_RESULT_LIST    // 検索結果の一覧表示を有効
    }

  new GSmapSearchControl(
    document.getElementById( 'search-control' ), // コントロールを格納する要素
    'Tokyo',  // 検索キーワード
    options   // オプション
    );
}

// ドキュメントがロードされた後に呼び出されるハンドラ関数を登録する
GSearch.setOnLoadCallback( OnLoad );
</script>

地図には2つの状態があり、内部的にはこれらを切り替えて表示しています。

  • The active map … 検索結果を表示している状態の地図
  • The idle map … 初期状態の地図

APIキー

ライブラリの読み込み時に有効なAPIキーを指定しないと、実行時にエラーとなります。

キーを指定しない、もしくは
設定と異なるドメインからアクセス		 無効なキーを指定

このウェブサイトには別の Google Maps API キーが必要です。新しいキーは http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key で作成できます。

Google has disabled use of the Maps API for this application. The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v2 on this site. If you are the owner of this application, you can learn about obtaining a valid key here: http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key

APIキーの取得は、Google Maps APIキーを参照してください。

参考

  • Google AJAX Search API - AJAX Map Search Control
  • Map Search Programming Guide

関連ページ