GMap2地図作成用タグ
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<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=---ここにgoogleのライセンスキーを挿入します---"
type="text/javascript">
</script>
<script type="text/javascript">
function initialize()
{
if (GBrowserIsCompatible())
{
//地図中のアイコンを設定します。
var baseIcon = new GIcon();
baseIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
baseIcon.iconSize = new GSize(12, 20);
baseIcon.shadowSize = new GSize(22, 20);
baseIcon.iconAnchor = new GPoint(6, 20);
baseIcon.infoWindowAnchor = new GPoint(5, 1);
// 予め設定された位置を中央にに地図を表示します。Center the map on Palo Alto
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(34.54615587076829, 136.11373901367187), 12);
//デフォルトはサテライトに設定します。私の好みです。
map.setMapType(G_SATELLITE_MAP);
function createMarker(point, index)
{
// マーカーは小さなアイコンで表現します。←他にもアイコン有
var tinyIcon = new GIcon(baseIcon)
tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
//GMarkerOptionsを設定し、マーカーに反映します
markerOptions = {icon:tinyIcon}
var marker = new GMarker(point, markerOptions);
// 最高10程度に地点を設定します。
// 地図のマーカーをクリックした時も、ページ中の地名をクリックしても詳細が出るようにします。
if (index==0){
var html =('<font size="2"><font color=#ff0000"><b>地名 その１</b></font><br><br>こういう感じになります。<br>・+キーでズームイン。<br>・－キーでズームアウト<br>・地図への切替可能です。</font>');
var mark_0 = document.getElementById("mark_0");
if(mark_0){mark_0.onclick = hyoji;};
};
if (index==1){
var html =('<font size="2"><font color=#ff0000"><b>地名 その２</b></font><br><br>ここにHTMLのタグを組み込みます。</font>');
var mark_1 = document.getElementById("mark_1");
if(mark_1){mark_1.onclick = hyoji;};
};
if (index==2){
var html =('<font size="2"><font color=#ff0000"><b>地名 その３</b></font><br><br><A href="http://www.onwil.com" target="_self">リンク設定も可能です。</A></font>');
var mark_2 = document.getElementById("mark_2");
if(mark_2){mark_2.onclick = hyoji;};
};
if (index==3){
var html =('<font size="2"><font color=#ff0000"><b>地名 その４</b></font><br><br>イメージの貼り付けも可能です。</font><br><br><div align="center"><A href="http://www.onwil.com" target="_parent"><img src="http://www.onwil.com/images/s_poweredby.gif" border="0"></a></div>');
var mark_3 = document.getElementById("mark_3");
if(mark_3){mark_3.onclick = hyoji;};
};
// ページ内からリンクされたときに詳細を表示します。
function hyoji() {marker.openInfoWindowHtml(html);};
// 地図の中でマーカーをクリックした時に詳細を表示します
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);});
return marker;
}
// 各地点のマーカーポイントを緯度、経度で設定します。
var point = new GLatLng(34.521125677398366,136.16396069526672);
var marker = createMarker(point,0);
map.addOverlay(marker);
var point = new GLatLng(34.52444932834194,136.15062475204468);
var marker = createMarker(point,1);
map.addOverlay(marker);
var point = new GLatLng(34.559295476856946,136.09166979789734);
var marker = createMarker(point,2);
map.addOverlay(marker);
var point = new GLatLng(34.56425211258391,136.10034942626953);
var marker = createMarker(point,3);
map.addOverlay(marker);
}
// エラーが発生したときに表示します。
else{document.getElementById('map').innerHTML='残念ながら、ご利用の環境ではこのマップをご覧いただけません。';}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()" bgcolor="#72baa7" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
<table width="550" border="0" align="center" valign="top" bgcolor="#008000" cellspacing="2" cellpadding="0">
<tr>
<td>
<table width="546" height="30" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#c1d8ac">
<tr>
<td width="546" align="center"><font size="3" color="#000000"><b>○○周辺地図の表示</b></font>
</td>
</tr>
</table>
<table width="546" height="420" border="0" align="center" cellspacing="0" cellpadding="0" bgcolor="#FFFFCC">
<tr>
<td align="left" valign="middle" height="420">
<div id="map" style="width: 386px; height: 420px"></div>
</td>
<td valign="top" width="203">
<font size="2">
<div align="center" style="background-color:#eeefff;padding:4px;">
<font size="2"><b>○○周辺地図地名</b></font>
</div>
<ol style="display: block;padding:4px;">
<li type=1 id="mark_0" style="padding:4px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:4px;">
地名 その１</a></li>
<li type=1 id="mark_1" style="padding:4px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:4px;">
地名 その２</a></li>
<li type=1 id="mark_2" style="padding:4px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:4px;">
地名 その３</a></li>
<li type=1 id="mark_3" style="padding:4px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:4px;">
地名 その４</a></li>
</ol>
<br>
<div style="padding:10px">
※上記の地名をクリックすると場所を案内するウインドウが表示されます。
</div>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>