無料サイト登録はこちらから
熊本の今を楽しむWEBサイト このサイトは個人運営です
人生、今を少し楽しく暮らすこと・・・
HOME|SEO対策「無料サイト登録」|メンバーブログBBS
自分で簡単!業者不要のGoogleマップ作成方法!Googleマップを自分のサイトへ
超〜初心者向け!Googleマップを自分のサイトへ、、、そしてカスタマイズの術
まず必ずいるもの-Googleマップ取得前に-
・ オリジナルの独自ドメインがあること。または取得済み、ホームページを持っている
・ HTMLがまったくわからない人はタグ辞典があると便利だね〜。

サイト マップ API を申し込む
わりと簡単にできます。間違えることはないと思いますが、以下のサイト(右側のようなページがひらきます)から、申し込んでいきます。
http://code.google.com/intl/ja/apis/maps/signup.html

利用規約に同意して、自分のホームページのアドレスを入れましょう
その後「APIキーを生成」 ボタンをクリックします。

サイト サインアップの修了
取得が完了すると、右のようなページがあらわれます。
すると、「 Your key is: 」というところの部分、これを自分のホームページに貼り付けることになるので、忘れガチな人や今日は取得だけというなら、ローカルに保存しておくことをおすすめします。

また、その下にある「Here is an example web page to get you started on your way to mapping glory: 」の部分、ここを単純にソースの中に埋め込むと、Googleマップは単純にみれるようになるわけです。
(場所の特定はこの初期状態では、自分の思う場所ではないのであとでカスタマイズしていくわけです)

ではそのソースをはりつけてみよう。
単純に、「Here is an example web page to get you started on your way to mapping glory: 」の以下の部分をメモ帳などにはりつけ、「●●●.html」と名前をつけて保存。これで見てみよう。
※以下の部分は「iframe」タグで呼び出しています。自分のホームページレイアウトにあわせるなら、このタグを利用し、その保存したファイル名を呼び出すほうが簡単です。
また、いったんインラインフレームで呼び出す場合、サイズに気をつけてください。作成した ●●●.htmlのソース部分、<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>の赤字部分のサイズの変更がいりますね。そこを注意

以下の地図は400px×300pxなので、上記部分の500px→400pxに書き換えています
そしてiframeタグで呼び出したものです。

これで第一段階修了です。

自分がほしい情報に切り替えてみる。
ソース内のfunction load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
これが緯度と軽度を表しています。( 地図の中心点の経度と緯度 )
この部分を変更して自分の表示したい数値に切り替えていく必要があります。
Googleマップ http://maps.google.co.jp/ で調べます。
今回は熊本城を中心に表示させましょう。

熊本城の上で右クリックすると、表示がでます。

ここからのルートをクリック

左側に「出発」がでます。これ、緯度と軽度です。
※初心者向け解説しております(^▽^;)わかりやすいように・・・・。

以下の地図は400px×300pxなので、上記部分の500px→400pxに書き換えています
そしてiframeタグで呼び出したものです。

これで第二段階修了です。
次へ

- 現在は特にありません -
なにかありましたら