グーグルマップ（google maps）地図をホームページに貼る　（ホームページに掲載する方法）　フリーソフト

■グーグルマップを設置する
グーグルの地図は楽しい！ホームページに掲載する。簡単な掲載方法です

　最近はこんなことしなくても掲載できますが。。アンカーポイントを二つ付けるとか。支店が３ケ所あるので二つ矢印をつけたいとか？の参考になるかと思います

グーグルの地図をホームページに貼り付けたい。
http://www.google.com/apis/maps/
ここにサインアップする。

ページが代わって英語ばかりだけど。。

チェックを入れて。ホームページのURLを入れる。（自分の掲載するホームページ）（　別のサイトだとまた、API Key を取得する）

Generate API Key ボタンを押すと。キーが発行される。
それをコピーして、メモ帳で保存しておく。

その下にはhtmlも出来ている。これを使います。
これもメモ帳にコピー＆ペーストして保存は？？？

デスクトップにとりあえず保存する。
文字コードはUTF-8を選択。ファイル名にhtmlをつける。

そうすると下記のアイコンができました。

これをダブルクリックすると下の画像です。。　

動くサンプルはこちら

ドラッグすると動いたでしょう。拡大や縮小はできないけれど。。
アメリカの西海岸ですか？表示されています。でもここは日本。修正します。
ｈｔｍｌをメモ帳で開いて修正します。
（メモ帳のショートカットをデスクトップに作っておいて、そこにドラッグすればいいかも）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ココにAPIのkey"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

ココにAPIのKeyのところに発行されたKEY。現在はそのままで入っている。
37.4419, -122.1419　は東経や西経の緯度をいれる。13はズーム度
width: 500px; height: 300px　地図のサイズ（横と縦。ピクセルで表示）
Google Maps JavaScript API Example　タイトルを変える

タイトルに大阪城ホールの地図　と入れて地図の大きさは800-600にして、34.68951,135.530112に緯度を入れてみます。ズーム度は16

このように大阪城のとなりにある大阪城ホールが中央に表示されました。動くサンプルはこちら

これで日本の地図なので親近感がわきます

グーグルマップ（google maps）で東経や西経の位置を調べる
普通に掲載したい地点をさがします。グーグルマップで表示します。http://maps.google.co.jp/

ダブルクリックするとその位置が中央にきます。（これは便利です）
ずーとスームして一番最大の時点になったときに。このページのリンクをクリックします。

このページにリンクをクリックすると。

http://maps.google.co.jp/?ie=UTF8&ll=34.689686,135.530219&spn=0.007587,0.014291&z=16&om=1

この赤い部分が位置です、これをコピーして。グーグルマップの検索バーに入れます。

このリンクを貼り付けて地図を共有できます。ココをコピーしてください。（そしてメモ帳で開くと）

その数字で検索します。すると大阪城ホールに矢印が出来ました。これでＯＫです。この数字をコピーして保存します

34.689686,135.530219　は大阪城ホールの位置です。このようにして東経や西経をしらべます

35.003359,135.748417　は京都四条大宮です

詳細表示にしていないと、あとから詳細表示にしたら、位置が外れることもあります。気をつけて！

（最大まで拡大ということです）

でも、拡大縮小ズームが無いのでそれを追加します。

コントローラーを入れました。動くサンプルはこちら！

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(34.68951,135.530112), 16);

}
}
//]]>
</script>

map.addControl(new GLargeMapControl());　を入れるだけです。入れる場所は間違わないように。

あとはアンカーポイントをつけます。マーカー？？

var marker = new GMarker(new GLatLng(34.68951,135.530112));map.addOverlay(marker);

これを追加します。

これで出来上がりました。一応。。（笑）
出来上がりのテスト。動くサンプルはこちら

アンカーポイント付き（コントロールボタンは大）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>大阪城ホールの地図</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=自分のAPIのキーを入れる"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(34.68951,135.530112), 16);
var marker = new GMarker(new GLatLng(34.68951,135.530112));map.addOverlay(marker);

}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>

※　赤いところだけ変更すると、そのままコピーしてメモ帳で保存。保存するときはUTF-8で保存。
拡張子にｈｔｍｌをつけると使えます。

これで使えます。
もちろんそのままでも、使えますが、ごちゃごちゃしたページに一部に挿入しようとすると失敗することがあります。

そんな時はインラインフレームを使います

インラインフレームとは？？
htmlファイルをアップする。（仮にmap-4.html）

元のｈｔｍｌファイルにこのファイルをを入れたい位置に挿入します。　
map-4.htmlを読み込むという意味です。大きさは400-300に変更します。
小さいとコントローラーが大きくてはみ出ますので、、変更します。

上記の緑で囲まれている部分を修正して小さくします。
アンカーポイント付き（コントロールボタンは小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>大阪城ホールの地図</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=自分のAPIのキーを入れる"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(34.68951,135.530112), 16);
var marker = new GMarker(new GLatLng(34.68951,135.530112));map.addOverlay(marker);

}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 400px; height: 300px"></div>
</body>
</html>

航空写真のボタンを入れた分です

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>大阪城ホールの地図</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=自分のＡＰＩキーを入れる"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(34.68951,135.530112), 16);
var marker = new GMarker(new GLatLng(34.68951,135.530112));map.addOverlay(marker);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 400px; height: 300px"></div>
</body>
</html>

上の緑色で囲まれているhtmlはそのまま使えます。自分で使用するときは赤い部分を変更してください。

もし背景等に色をつけていて上や左のスペースが白く見えることがある。

http://santa-studio.com/free/google-map/map-4.html

これも良く見たら、上部と左にスペースが開いている。ここを左上にスペースを詰める。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>大阪城ホールの地図</title>
<style type="text/css">

<script src="http://maps.google.com/maps?file=api&v=2&key=自分のＡＰＩキーを入れる"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(34.68951,135.530112), 16);
var marker = new GMarker(new GLatLng(34.68951,135.530112));map.addOverlay(marker);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 400px; height: 300px"></div>
</body>
</html>

一応これで完成です