山の喫茶店「カフェテラスえの木」: google-map-apiの四苦八苦アーカイブ

Top ＞５・PC関係を覚える＞ google-map-apiの四苦八苦

google-map-apiの四苦八苦アーカイブ

2007年8月 4日

google-map APIを作る（其の２）

今回は「body」内を書くが何だか書くのも難しいワイ！
以下は山の爺の作りかけの「body」内のタグと言う物。

<body onload="load()" onunload="GUnload()">

<table border="4" align="center">
<tr><td colspan="2"><div id="map" style="width: 800px; height: 500px"></div></td></tr>

<tr><td width=300>1<input type="checkbox" name="cb1" onClick="checkbox1clicked()">カフェテラス「えの木」（テスト表示）</td><td width=500>2山の爺の住む位置はコノ辺り</td></tr>

<tr><td>3<input type="checkbox" name="cb2" onclick="checkbox2clicked()">4富士山（テスト）</td><td>4テスト、コノ辺りが富士の頂上か？</td></tr>

<tr><td>5<input type="checkbox" name="cb3" onclick="checkbox3clicked()">名古屋駅（テスト）</td><td>6駅はコノ辺り・・・。</td></tr>

<tr><td>7</td><td>8</td></tr>

<tr><td>9</td><td>10</td></tr>

</table>

<script type="text/javascript">
//<![CDATA[
var map;
var marker1, marker2, marker3,・・・・ ;

map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.062082, 136.482188), 6);

marker1 = new GMarker(new GLatLng(35.062082, 136.482188));
var marker1_is_displayed = 0;
function checkbox1clicked() {
if (marker1_is_displayed == 0) {
map.addOverlay(marker1);
marker1_is_displayed = 1;
} else {
map.removeOverlay(marker1);
marker1_is_displayed = 0;
}
}

marker2 = new GMarker(new GLatLng(35.36283226698779, 138.73088836669922));
var marker2_is_displayed = 0;
function checkbox2clicked() {
if (marker2_is_displayed == 0) {
map.addOverlay(marker2);
marker2_is_displayed = 1;
} else {
map.removeOverlay(marker2);
marker2_is_displayed = 0;
}
}

marker3 = new GMarker(new GLatLng(35.171001920816955, 136.88175201416016));
var marker3_is_displayed = 0;
function checkbox3clicked() {
if (marker3_is_displayed == 0) {
map.addOverlay(marker3);
marker3_is_displayed = 1;
} else {
map.removeOverlay(marker3);
marker3_is_displayed = 0;
}
}
　：
　：
　：

//]]>

</script>
<p><a href="http://cafeterrace-enoki.com">topに戻る</a></p>
</body>

・・・と取りあえずは「body」内に入れておこう！
※赤の部分だけでも取り合えずは地図のみ表示される。
※茶色の部分は記事毎に追加する物。（是がチョット面倒じゃ！）
追加する物には連番があるので気をつけよう！

遣り方はこの様な感じだったようだ？少しは違いが有るかも？（有ってはならないと思うのだが・・？）
コノ画面の出来上がりはコチラだ。

≪ 続きを隠す

人気ブログランキングへ

日時-c: 2007年8月 4日 11:27 | パーマリンク | コメント (0)

2007年7月30日

フレームページを・・・・

先ずは先回は送られて来た物を貼り付けたので「body」内のみに関しての説明だ。
「table-border」と言う物を作り其の中に入れよう、と云う物。
テーブルの作り方も検索すれば解ると思うので省くが爺は以下のようにしてみた。

ボタン	コメント
地図画面
1	2

この様な物を作りコノ中に入れようと思っている！のだが・・？

上のタグの表示は以下の感じになる

<table border="3">
<tr>
<td colSpan="2" width="40" height="50" align="center">地図画面</td></tr>
<tr>
<th>ボタン</th><th>コメント</th></tr>
<tr>
<td>1</td><td>2</td></tr>
</table>

続きを読む ≫

人気ブログランキングへ

日時-c: 2007年7月30日 14:27 | パーマリンク | コメント (0)

2007年7月25日

基本の地図

送られて来た「google map API」のキーを其の侭作れば表示されるのだ。

送られて来た物は以下のような物。

<!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>
<title>Google Maps JavaScript API Example - simple</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=（各自のキー）"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width:300px; height:300px"></div>
<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.441944, -122.141944), 13);
}

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

</html>

続きを読む ≫

人気ブログランキングへ

日時-c: 2007年7月25日 13:09 | パーマリンク | コメント (0)

2007年7月22日

google-map-APIでページを作ってみる

以前作っていたのだが、mtのバージョンアップで失敗して全てが無くなった～！
しまった～！バックアップを取るべきだった。
と後の祭り、記事も数個書いて地図にも表示してあったのだが・・・。

再度作り方をメモとして残しておく！
是は「google-map-api」と言う物を取ってあることを前提にページ内に記事にし内容より地図に表示すると言う物。

チョット山の爺には難しかったな～？詳しい人ならモット簡単な方法があるのだろうが・・・？
然し何とか・・。

一度には書く事が出来ない為分けて書く事にした。
コンナに難しいとは？
普通なら記事内に一つずつ地図を貼る事が出来る物が有るのだが・・。

是は・・・

続きを読む ≫

人気ブログランキングへ

日時-c: 2007年7月22日 19:11 | パーマリンク | コメント (0)

皆さんからのコメント

▼更新日付表示
└ 萌 07/162008:07:16:10:52:33
└ 山の爺 07/182008:07:18:09:55:00
▼.htaccess（ドットエイチティーアクセス）とは？
└ 萌 07/122008:07:12:11:43:55
└ 山の爺 07/132008:07:13:10:38:18
└ 山の爺 07/132008:07:13:18:07:05
▼フォーラム高知？
└ 通りすがり 06/302008:06:30:06:30:54
└ 山の爺 07/042008:07:04:12:58:13
▼米粉ケーキ
└ 月うさぎ 06/152008:06:15:11:07:16
└ hanasakuoka 06/252008:06:25:01:15:40
└ 山の爺 06/272008:06:27:14:28:51
└ 山の爺 06/272008:06:27:14:32:29
└ めいぷる 06/282008:06:28:14:18:48
└ 山の爺 07/042008:07:04:12:54:47
▼フォーラム熊本？
└ 大阪の単身赴任者より 01/222008:01:22:16:23:57
└ 山の爺 01/232008:01:23:13:10:24
└ hanasakuoka 01/232008:01:23:23:53:28
└ 山の爺 01/252008:01:25:12:24:29
└ 通りすがり 06/302008:06:30:06:18:24
▼ササユリ
└ めいぷる 06/052008:06:05:22:16:16
└ うらべに 06/062008:06:06:11:16:33
└ 山の爺 06/112008:06:11:13:16:37
└ 山の爺 06/112008:06:11:13:19:32
▼ゴールドコイン
└ まーにゃ 05/282008:05:28:13:33:30
└ 山の爺 05/292008:05:29:11:22:56

山の喫茶店「カフェテラスえの木」

「三重県菰野町」ローカル版・・山の奥の小さな茶店での話題や出来事！

初めに・・・

カテゴリー

About google-map-apiの四苦八苦

皆さんからのコメント

管理者用

QRコード

google-map-apiの四苦八苦アーカイブ

2007年8月 4日

google-map APIを作る（其の２）

2007年7月30日

フレームページを・・・・

2007年7月25日

基本の地図

2007年7月22日

google-map-APIでページを作ってみる

スポンサードリンク

BlogPeople

ホームページリンク集

バナー

山の喫茶店「カフェテラスえの木」

「三重県菰野町」ローカル版・・山の奥の小さな茶店での話題や出来事！

初めに・・・

カテゴリー

About google-map-apiの四苦八苦

皆さんからのコメント

管理者用

QRコード

google-map-apiの四苦八苦 アーカイブ

2007年8月 4日

google-map APIを作る（其の２）

2007年7月30日

フレームページを・・・・

2007年7月25日

基本の地図

2007年7月22日

google-map-APIでページを作ってみる

スポンサードリンク

BlogPeople

ホームページリンク集

バナー

google-map-apiの四苦八苦アーカイブ