サンプルページ　　　Google Maps 17

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　Google Maps 17　　google_maps17.htm

各国の場所、国旗をﾘｽﾄから辿る、国旗をXMLﾌｧｲﾙに記述。　　　　　　Google Maps API、XML、DHTML。　　　　　　ﾃﾞｻﾞｲﾝなどｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。　　　　　　関連・詳細情報：国旗

ﾃﾞﾓは、地域、ﾘｽﾄ、国旗のｸﾘｯｸなどで。

< ご使用方法 >

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

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

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

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 10.x～などで開いて。　　　　更新の確認は、[F5]ｷｰを押し、最新ﾃﾞｰﾀ読み込み、で。　　　　あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ﾂｰﾙ] - [ｲﾝﾀｰﾈｯﾄｵﾌﾟｼｮﾝ] - [閲覧の履歴] - [削除] などでも。

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

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

　HTMLの編集方法　

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

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

UTF-8使用（削除不可）

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

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

地域ﾒﾆｭｰ位置　色　背景色　背景画像

Google Maps位置
ﾘｽﾄ位置　幅

Google Maps API

<title>サンプルページ　　Google Maps 17</title>

<STYLE type="text/css">
html {height: 100%;}
body {text-align: left; height: 100%; margin: 0; padding: 0; background: #F9F8F9 url('../wttec.gif'); font-size: 12px; font-family: Arial,メイリオ,MS PGothic;}
#wrapper {margin: 0 auto;}
#header {position: absolute; top: 10px; left: 5px; text-align: left; color: #000;background: #D4D0C8 url('http://xml-xsl.sakura.ne.jp/bg_slva2r.jpg');}
#header a {color: #190049;}
#map_canvas {position: absolute; top: 30px; right: 200px; bottom: 5px; left: 5px; width: auto; height: auto; text-align: left; overflow: hidden;}
#side_bar {position: absolute; top: 30px; right: 5px; bottom: 5px; width: 180px; height: auto; overflow: auto; padding: 5px 5px; text-align: left; background: #F9F8F9 url('../wttec.gif');}
x#desc {position: absolute; bottom: 5px; left: 0; right: 0; height: 0px; overflow: hidden;}
</STYLE>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<SCRIPT type="text/javascript">
google.maps.visualRefresh = true;
var icon = Array();
var infowindow = new google.maps.InfoWindow();
var map;
var MY_MAPTYPE_ID = 'Simple';
function initialize(url) {

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

}
function doNothing() {};
</SCRIPT>

<SCRIPT type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-37216234-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</SCRIPT>

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

　HTMLの編集方法　

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

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

JavaScript（初期地域）

ﾊｲﾊﾟｰﾘﾝｸ　吹き出し　地球画像
ﾊｲﾊﾟｰﾘﾝｸ　吹き出し

地域

以下、同様。

<body onload="initialize('0087547as.xml')">

<DIV id="wrapper">
<DIV id="header">　<a href="http://　……　flagw1b.htm" target="_blank" title="⇒　国旗を NewWin で。"><img src="map.gif" alt="" width="16" height="16" border="0" align="absbottom" /></a>　<a href="http://www.mofa.go.jp/mofaj/area/index.html" target="_blank" title="⇒　外務省: 各国・地域情勢を NewWin で。">世界の国（195）</a>　⇒　<A
onclick='javascript:initialize("0087547as.xml");' href="#">アジア</A>　
<A onclick='javascript:initialize("0087547am.xml");' href="#">
北米、中南米</A>　
<A onclick='javascript:initialize("0087547eu.xml");' href="#">
欧州（NIS諸国を含む）</A>　
<A onclick='javascript:initialize("0087547me.xml");' href="#">
中東</A>　
<A onclick='javascript:initialize("0087547os.xml");' href="#">
大洋州</A>　
<A onclick='javascript:initialize("0087547af.xml");' href="#">
アフリカ</A>
</DIV>
<DIV id="map_canvas"></DIV>
<DIV id="side_bar"></DIV>
</DIV>

==== この間､自由HTMLを記述、説明を省略｡ ====

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

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