かんたん Google Maps 使い方 [位置情報取得ページへ戻る]

かんたんGoogle Mapsは、Google Maps APIのJavaScript、かんたんGoogle MapsのJavaScriptを読み込んでオプション指定をすることで簡単にGoogle Mapsをページに追加することが出来ます。

サンプル

初期設定

HTMLの<head>タグ内で、以下の2つのスクリプトを読み込みます。

code:

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&hl=ja&key="></script>
<script type="text/javascript" src="gmap.js"></script>

GoogleMaps用APIのJavaScriptには取得したAPIキーを追加します。(key=APIキー)

表示方法

まず、Google Mapを表示させるためのdivタグを用意します。divタグにはIDを付けて特定できるようにしておきます。

code:

<div id="gmap"></div>

次に、マップを表示するための関数を呼び出します。

code:

showMap(表示オプション);

関数の呼び出しと同時に表示処理が動くので、そのまま使用する場合は必ず表示させるdivタグよりも下に、もしくはonLoadイベントやjQueryのready()関数で呼び出すようにします。

表示オプション

表示オプションは以下の通りです。これらのオプションをオブジェクトとして定義し、showMapに渡します。

id
マップを表示させるdivタグのID(例では"gmap")
title
バルーンを表示させる場合はそのタイトル(タイトルが入力されているとバルーンが表示されます)
address
バルーンに表示する住所表記
link
バルーンに表示するリンクURL
point
緯度、経度の配列([緯度,経度])
control
マップコントロールを表示するか(true | false)
type
マップタイプの切り替えを表示するか(true | false)

code:

showMap({
	id:      "map",
	title:   "有限会社ドットアスター",
	address: "西宮市南郷町 6-15-301",
	link:    "http://www.dotAster.com",
	point:   [34.7450066,135.3314123],
	control: true,
	type:    true,
});