google地図 GMapからバージョンアップ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=1&key=---ここにgoogleのライセンスキーを挿入します---"
<script src="http://maps.google.com/maps?file=api&v=2&key=---ここにgoogleのライセンスキーを挿入します---"
type="text/javascript">
</script>
<script type="text/javascript">
function onLoad()
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 GMap(document.getElementById("map"));
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(136.11373901367187,34.54615587076829),5);
map.setCenter(new GLatLng(34.54615587076829, 136.11373901367187), 12);
【注意点】1.centerAndZoom → setCenter に変更します
2.GPoint → GLatLng に変更します
GLatLngでの設定はGPointとは経度、緯度を全く逆位置に設定をします
3.縮尺も数字が大きくなるほど広域を表示します。
例えばGMapで「5」のGPointレンジ → GMap2で「12」のGLatLngレンジに相当します
//デフォルトはサテライトに設定します。私の好みです。地図の場合は(G_MAP_TYPE →G_NORMAL_MAP)に
変更あるいは記述しなくてもＯＫ
map.setMapType(G_SATELLITE_TYPE →G_SATELLITE_MAP);
【注意点】map.setMapTypeの表現がG_SATELLITE_TYPEでは2008.10に認識されなくなってしまいました。
以前のまま G_SATELLITE_TYPEだと表示されません。
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="_self"><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 GPoint(136.16396069526672,34.521125677398366);
var point = new GLatLng(34.521125677398366,136.16396069526672);
var marker = createMarker(point,0);
map.addOverlay(marker);
var point = new GPoint(136.15062475204468,34.52444932834194);
var point = new GLatLng(34.52444932834194,136.15062475204468);
var marker = createMarker(point,1);
map.addOverlay(marker);
var point = new GPoint(136.09166979789734,34.559295476856946);
var point = new GLatLng(34.559295476856946,136.09166979789734);
var marker = createMarker(point,2);
map.addOverlay(marker);
var point = new GPoint(136.10034942626953,34.56425211258391);
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="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>