サンプルページ　　　グーグルマップ 1d

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ｸﾞｰｸﾞﾙﾏｯﾌﾟ 1d　　google_map1d.htm

ﾌﾟﾙﾀﾞﾝﾒﾆｭｰで指定した場所の、Google ﾏｯﾌﾟを表示｡　　　地形や、ｽﾄﾘｰﾄﾋﾞｭｰ、航空写真からなどの、復旧は“F5ｷｰ”で。　　　　　表示ｻｲｽﾞや初期表示ﾎﾟｲﾝﾄ、縮尺などのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

関連情報 :

ﾃﾞﾓは、ﾌﾟﾙﾀﾞﾝﾒﾆｭｰで選択、Google ﾏｯﾌﾟを表示｡　　　　　地形や、ｽﾄﾘｰﾄﾋﾞｭｰ、航空写真からなどの、復旧は“F5ｷｰ”で。

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、google_map/をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、google_map3n.htm、00434471.json を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 変わってしまった、ﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

　・　このDHTMLの実装方法は、google_map1d.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名）の、 <head>　～　</head> の任意の行間に (*1)を、さらに <body>　～　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。

　･　編集方法は、hogehoge.html を WordPad や SmipleTextなどのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰで開き編集します。　　　　下記の（例） (*1) と、(*2) を参考に太字部分の編集を任意に行います。　　　ﾀｰｹﾞｯﾄの座標（緯経度）や、吹き出しに表示する “ﾊｲﾊﾟｰﾘﾝｸ”、“ﾃｷｽﾄ”は、*.json の編集で。　　　　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 8.x～などで開いて。　　　　更新の確認は [F5]ｷｰを押し、ｻｰﾊﾞｰやﾌﾞﾗｳｻﾞｰのｷｬｯｼｭｸﾘｱｰ、最新ﾃﾞｰﾀ読み込み（≠再ｱｸｾｽ）で行います。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する *.json,背景画像なども転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。　　　FTPなどで変わってしまったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

(*1) ：　google_map1d.htm （例）　　　　　　　　　挿入先の　<head> ～ </head>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕　

ｼﾌﾄJIS使用（削除不可）

ｉｅなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent
お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

ﾏｯﾌﾟｻｲｽﾞ

ﾃﾞﾌｫﾙﾄ表示緯度・経度　　ｽﾞｰﾑ

Google Map3b などで獲得。

緯度・経度

以下、同様。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<title>サンプルページ　　グーグルマップ 1d</title>

<style type="text/css">
div#map_canvas {
position:relative; margin-top:-11px; width:100%; height:800px;
border-left: #D8D7E9 1px solid; border-top: #D8D7E9 1px solid; border-right: #C9C5E4 1px solid; border-bottom: #C9C5E4 1px solid;
}
select#tag {
width:220px; padding:1px 2px; color:#11002A; background-color:#EFEBE9;
}
span#title {
position:relative; left:10px; top:px; font:normal 13px Lucida Sans Console;
}
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
<!--//
var map;
function initialize() {
var latlng = new google.maps.LatLng(28.122359,-15.40467);
var opts = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
function tosite1() { map.panTo(new google.maps.LatLng(62.601933,-144.639301));}
function tosite2() { map.panTo(new google.maps.LatLng(63.497681,-143.833371));}
function tosite3() { map.panTo(new google.maps.LatLng(67.43753,-150.078121));}

====　　　この間､説明を省略｡　　　====

function tosite80() { map.panTo(new google.maps.LatLng(-62.595869,-59.902364));}
//-->
</script>

</head>

(*2) ：　google_map1d.htm （例）　　　　　　　　挿入先の　<body> ～ </body>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

場所名

以下、同様。

<body onload="initialize()">

<div>
<select id="tag">
<option selected value="">　∇ 選択してください。　</option>
<option value="ﾁｽﾄﾁｰﾅ　ｱﾗｽｶ" onclick="tosite1()">ﾁｽﾄﾁｰﾅ　ｱﾗｽｶ</option>
<option value="DotLake　ｱﾗｽｶ" onclick="tosite2()">DotLake　ｱﾗｽｶ</option>
<option value="北極圏の扉-5　ｱﾗｽｶ" onclick="tosite3()">北極圏の扉-5　ｱﾗｽｶ</option>

====　　　この間､説明を省略｡　　　====

<option value="ﾘﾋﾞﾝｸﾞｽﾄﾝ -1　南極" onclick="tosite80()">ﾘﾋﾞﾝｸﾞｽﾄﾝ -1　南極</option>
</select>
<span id="title">選択した場所の “Google Map” を表示。　　　地形や、ｽﾄﾘｰﾄﾋﾞｭｰ、航空写真からなどの、復旧は“F5ｷｰ”で。</span>
</div> 　
<div id="map_canvas"></div>

====　　　以下､説明を省略｡　　　====

< 補足 >　　　　適時参照あれ！。

　・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。