| グーグルの地図は楽しい！ホームページに掲載する。簡単な掲載方法です。完成版はこちら |
 |
グーグルの地図をホームページに貼り付けたい。 |
|
ここにサインアップする。 |
|
ページが代わって英語ばかりだけど。。 |
|
チェックを入れて。ホームページの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 |
| |
|
|
これで日本の地図なので親近感がわきます。（笑） |
|
でも、拡大縮小ズームが無いのでそれを追加します。 |
| |
| |
|
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） |
| |
| <iframe src="map-4.html" width="400" height="300" scrolling="no" frameborder="0"></iframe> |
| |
|
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 G SmallMapControl());
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はそのまま使えます。自分で使用するときは赤い部分を変更してください。 |
|
