Google Map で地図を表示しよう！｜フリーフードファイター兼SE社長活動日記

　――――――――――――――――――――――――――――――――――
　　　Google Map で地図を表示しよう！ Google Maps API Key を取得
　――――――――――――――――――――――――――――――――――

　◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　　１．Google アカウントを作る！
　◆───────────────────────────────◆

　すでに持っていればそれを使用してください。
　持っていない場合は下記を参考にアカウントを取得してください！

　　▼Googleアカウントでアカウント発行
　　https://www.google.com/accounts/ManageAccount
　
　　　上記ＵＲＬを開きますと
　　　「Google アカウントをお持ちでない方はこちらから
　　　　　　　今すぐアカウントを作成」
　　　と表示されますので
　　　「今すぐアカウントを作成」をクリックします。

　　　必要事項を記入し「同意して、アカウントを作成します。」をクリック。
　　　アカウントを作成してください。
　

　◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　　２．Google Map API Key を取得する！
　◆───────────────────────────────◆

　下記URLからAPI KEYを取得します！

　▼ Google Maps API

　□I have read and agree with ・・・
　　　the terms and conditions (printable version)
　のチェックをチェック！

　「My web site URL:」に続くボックスに
　ご自分のサイトのURLを入力します。

　「Generate API Key」ボタンをクリックします！

　（※この際、入力したURLのサイト以外からは地図を表示することが出来ませんので
　ちょっと工夫するか、サイトごとに API KEY を取得する必要があります。）

　すると
　「Thank you for signing up for a Google Maps API key!」
　というメッセージとともに
　念願の「Google Maps API Key」が表示されました。

　その下部にあるサンプルコードを参考に
　「自分で作る！」っていうのが基本なんでしょうが
　ちょっと手間がかかりますよねー

　そ・こ・で

　今回は「API Key」と「緯度・経度」（画像名が違う場合は画像名も）
　を変更すればＯＫ！の
　「手間なし簡単コード」
　をつけましたので参考にしてください！！

　◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　　３．緯度経度を調べよう！
　◆───────────────────────────────◆

　▼ Geocoding 住所から緯度経度を検索

　このサイトで調べることが出来ます。

　住所またはランドマーク名を入れてみましょう。

　サンプルにある「ランドマーク名『東京タワー』で検索」を
　押してみるとすぐにわかると思います。

　このとき「ふきだし」に表示された
　「東京タワー
　　座標: 35.658632, 139.745411」
　という文字列が緯度・経度です。

　では、実際に地図表示したい場所の住所等を入力し
　調べてみてください。

　このとき注意が必要なのは
　「緯度・経度」の順に表示されていることです。

　実際にGoogleマップのコードに入れる順番は
　（経度, 緯度）となります。

　コピーしてきたものの順番を入れ替える必要があります。

　◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　　４．目印を作ろう！
　◆───────────────────────────────◆

　コンサイズのサイトでは下記の画像２つを使用しています。

　▼ 目印

　▼ 目印（影）

　あまり良いサンプルではないですな・・・（笑）

　画鋲マークや旗などご自分の好きなものをどうぞ！

　◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　　５．手間なしコード！　（おまけ）
　◆───────────────────────────────◆

　・・・ここから・・・ここまで・・・の部分をコピーして
　地図を貼り付けたいところのHTMLに直接貼り付けます。

　注意点
　・（あなたのキー）の部分は確実に取得したAPI Key に変更してください。
　・緯度・経度を変更すること！このままだとコンサイズになります！
　・リンク部分も変更してください！本当にコンサイズになります！（笑）

————————— ここから —————————



<!-- 地図表示部 本体 -->

<!-- width と height は適宜変更してください！ -->

<div id="map" style="width: 300px; height: 300px"></div>

<script 

src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=（あなたのキー）"

type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

//<![CDATA[

　　var map = new GMap(document.getElementById("map"));

map.addControl(new GSmallMapControl());



// ３．で取得した 緯度、経度を （経度, 緯度）の順で入力する

//

// new GPoint(139.711606, 35.646643) ←この部分

//

var point = new GPoint(139.711606, 35.646643);



　　map.centerAndZoom(point, 0);



　　var icon = new GIcon();



// マーカーのアイコン画像指定

　　icon.image = "map_arrow.png";

// マーカーの影アイコン画像指定

　　icon.shadow = "map_arrow_shadow.png";

// アイコンのサイズを記述

　　icon.iconSize = new GSize(34, 25);

// 影アイコンのサイズを記述

　　icon.shadowSize = new GSize(34, 25);

　　icon.iconAnchor = new GPoint(1, 23);

　　icon.infoWindowAnchor = new GPoint(10, 10);

// もう一度マーカーのアイコン画像指定

　　icon.transparent = "map_arrow.png";



　　var marker = new GMarker(point, icon);

　　GEvent.addListener(marker, "click", function() {

//

// この↓のhttp:・・と「株式会社コンサイズ」の部分は

// ご自分のサイトに変更してください

//

　　marker.openInfoWindowHtml("<b><a href='http://www.comsize.com/'>株式会社コンサイズ</a></b>" );

});



map.addOverlay(marker);

//]]>

</script>