無料サイト登録はこちらから
熊本の今を楽しむWEBサイト このサイトは個人運営です
人生、今を少し楽しく暮らすこと・・・
｜HOME｜SEO対策「無料サイト登録」｜メンバーブログ｜BBS｜｜
自分で簡単！業者不要のGoogleマップ作成方法！Googleマップを自分のサイトへ
超〜初心者向け！Googleマップを自分のサイトへ、、、そしてカスタマイズの術２
第1回目：地図を表示させるための基本テクは こちら

拡大・縮小などのコントロールをだす。
ソースを書き換えましょう。
今までの初期のソースをいじっていきます。
<head>〜</head>部分に記載されている情報を消します。

<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(32.806105, 130.705805), 13);
}
}
//]]>
</script>

といった部分です。それを<body>〜</body>に記述しなおします。
なのでこの部分
<script type="text/javascript">〜</script>　部分を消去。

BODY内に下記をコピペ

<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
var latlng = new GLatLng(32.806105, 130.705805);
map.setCenter(latlng, 14);

//]]>
</script>
</body>

これでネット上にアップしてみて確認してください。（＾＾）> でましたか？
わからない人は、http://www.bibi-work.com/maptest3.html　を開き、
ソースをコピペしてみて使用してください。
map.addControl(new GSmallMapControl());
という記述が、地図上に移動/縮尺ボタンを表示するので必ず要ります。

<div id="map" style="width: 400px; height: 300px"></div>
これは地図のサイズになります。ご自分にあわせて変更してください。

map.setCenter(latlng, 14);
赤字の値を変更してみるとわかると思います。好みで変更していってください。
広域表示させたいなら値を小さくするといいのですねぇ

map.addControl(new GLargeMapControl());部分の表記を
map.addControl(new GSmallMapControl()); に変更すると、コントロールが小さくなります。


map.setCenter(latlng, 14);

map.setCenter(latlng, 5);

iframeタグで呼び出したものです。

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

地図の種類を表示する。
<script type="text/javascript">
//<![CDATA[

var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var latlng = new GLatLng(32.806105, 130.705805);
map.setCenter(latlng, 14);

//]]>
</script>

赤字の部分を追加

iframeタグで呼び出したものです。

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