Google Map V3地図作成用タグ
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>○○周辺地図の表示</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var myinfowindow;
myMarkPosition = new Array();
myInfo = new Array();
function initialize() {
var myLatlng = new google.maps.LatLng(34.54615587076829, 136.11373901367187);
// 各マーカーの位置を設定します。
myMarkPosition[0] = new google.maps.LatLng(34.521125677398366,136.16396069526672);
myMarkPosition[1] = new google.maps.LatLng(34.52444932834194,136.15062475204468);
myMarkPosition[2] = new google.maps.LatLng(34.559295476856946,136.09166979789734);
myMarkPosition[3] = new google.maps.LatLng(34.56425211258391,136.10034942626953);
// 各情報ウィンドウの内容を設定します。
myInfo[0] = '<font size="2"><font color=#ff0000"><b>地名 その１</b></font><br><br>こういう感じになります。<br>・+キーでズームイン。<br>・－キーでズームアウト<br>・地図への切替可能です。</font>';
myInfo[1] = '<font size="2"><font color=#ff0000"><b>地名 その２</b></font><br><br>ここにHTMLのタグを組み込みます。</font>';
myInfo[2] = '<font size="2"><font color=#ff0000"><b>地名 その３</b></font><br><br><A href="http://www.onwil.com" target="_self">リンク設定も可能です。</A></font>';
myInfo[3] = '<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 myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// 情報ウィンドウの設定をします。
myinfowindow = new google.maps.InfoWindow();
// マーカーごとに情報ウィンドウを表示させます。
function showInfo(marker, num){
var hyoji = function()
{
myinfowindow.setContent(myInfo[num]);
myinfowindow.open(map,marker);
};
google.maps.event.addListener(marker, 'click', hyoji);
var mark_link = document.getElementById("mark_" + num );
if(mark_link){mark_link.onclick = hyoji;};
}
// 各マーカーを地図に設定します。
for(i in myMarkPosition){
var marker = new google.maps.Marker({
position:myMarkPosition[i],
map: map
});
showInfo(marker, i);
};
// 地図をクリックすると情報ウィンドウを閉じます。
google.maps.event.addListener(map, 'click', function(){
myinfowindow.close(map);
});
}
</script>
</head>
<body onload="initialize()" 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_canvas" 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>