GMap3のサンプル
2012/8/25 17:48:23作成
2018/10/1 7:53:21更新
2018/10/1 7:53:21更新
上段に地図、下段にリストが表示されるサンプルです。tableタグを使用すると携帯ではうまく表示されないのでdivタグを使って極力シンプルな形で地図だけを作成してみました。 これでアルファベッドでリストに地名、情報ウィンドウが26個まで設定が可能なマップになります。そもそもGmapV3は携帯対応という事なので携帯でも多分見れるのではないかと思います。 スマートフォンなどは持ち合わせていないので確認はしていません。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>○○周辺地図の表示</title>
<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?v=3&key=YOUR_API_KEY&callback=initMap"></script>
<script type="text/javascript">
var map;
var myinfowindow;
myMarker = new Array();
myMarkPosition = new Array();
myInfo = new Array();
function initialize() {
var myLatlng = new google.maps.LatLng(34.83867476538625 , 134.6945285797119);
// 各マーカーの位置を設定します。
myMarkPosition[0] = new google.maps.LatLng(34.83944857495147 , 134.693915694952);
myMarkPosition[1] = new google.maps.LatLng();
myMarkPosition[2] = new google.maps.LatLng();
myMarkPosition[3] = new google.maps.LatLng();
myMarkPosition[4] = new google.maps.LatLng();
myMarkPosition[5] = new google.maps.LatLng();
myMarkPosition[6] = new google.maps.LatLng();
myMarkPosition[7] = new google.maps.LatLng();
myMarkPosition[8] = new google.maps.LatLng();
myMarkPosition[9] = new google.maps.LatLng();
myMarkPosition[10] = new google.maps.LatLng();
myMarkPosition[11] = new google.maps.LatLng();
myMarkPosition[12] = new google.maps.LatLng();
myMarkPosition[13] = new google.maps.LatLng();
myMarkPosition[14] = new google.maps.LatLng();
myMarkPosition[15] = new google.maps.LatLng();
myMarkPosition[16] = new google.maps.LatLng();
myMarkPosition[17] = new google.maps.LatLng();
myMarkPosition[18] = new google.maps.LatLng();
myMarkPosition[19] = new google.maps.LatLng();
myMarkPosition[20] = new google.maps.LatLng();
myMarkPosition[21] = new google.maps.LatLng();
myMarkPosition[22] = new google.maps.LatLng();
myMarkPosition[23] = new google.maps.LatLng();
myMarkPosition[24] = new google.maps.LatLng();
myMarkPosition[25] = new google.maps.LatLng();
// 各情報ウィンドウの内容を設定します。
myInfo[0] = '例)ここが姫路城ですよ';
myInfo[1] = '';
myInfo[2] = '';
myInfo[3] = '';
myInfo[4] = '';
myInfo[5] = '';
myInfo[6] = '';
myInfo[7] = '';
myInfo[8] = '';
myInfo[9] = '';
myInfo[10] = '';
myInfo[11] = '';
myInfo[12] = '';
myInfo[13] = '';
myInfo[14] = '';
myInfo[15] = '';
myInfo[16] = '';
myInfo[17] = '';
myInfo[18] = '';
myInfo[19] = '';
myInfo[20] = '';
myInfo[21] = '';
myInfo[22] = '';
myInfo[23] = '';
myInfo[24] = '';
myInfo[25] = '';
// 地図の設定をします。
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// 情報ウィンドウの設定をします。
myinfowindow = new google.maps.InfoWindow();
// String.fromCharCode("A".charCodeAt(0) + index)
// var letter = String.fromCharCode("A".charCodeAt(0) + index)
//マーカーの設定を行います。
Mkimage = new Array(); //アルファベット順マーカーを設定
var Mkshadow; //マーカーの影を設定
for(index=0 ; index < myMarkPosition.length ; index++ ){
Mkimage[index] = new google.maps.MarkerImage('https://www.google.com/mapfiles/gadget/letters/marker' + String.fromCharCode("A".charCodeAt(0) + (index)) + '.png',
// This marker is 16 pixels wide by 27 pixels tall.
new google.maps.Size(16, 27),
// The origin for this Mkimage is 0,0.
new google.maps.Point(0,0),
// The anchor for this Mkimage is the base of the flagpole at 0,27.
new google.maps.Point(8, 27));
}
Mkshadow = new google.maps.MarkerImage('https://www.google.com/mapfiles/gadget/shadow50Small80.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
// This marker is 31 pixels wide by 27 pixels tall.
new google.maps.Size(31, 27),
// The origin for this Mkimage is 0,0.
new google.maps.Point(0,0),
// The anchor for this Mkimage is the base of the flagpole at 0,27.
new google.maps.Point(8, 27));
// 各マーカーを地図に設定します。
for(i=0; i < myMarkPosition.length ; i++){
myMarker[i] = new google.maps.Marker({
position:myMarkPosition[i],
icon: Mkimage[i],
shadow : Mkshadow,
map: map
});
showInfo(i);
};
// マーカーごとに情報ウィンドウを表示させます。
function showInfo(num){
var hyoji = function()
{
myinfowindow.setContent(myInfo[num]);
myinfowindow.open(map,myMarker[num]);
};
google.maps.event.addListener(myMarker[num], 'click', hyoji);
var mark_link = document.getElementById("mark_" + num );
if(mark_link){mark_link.onclick = hyoji;};
}
// 地図をクリックすると情報ウィンドウを閉じます。
google.maps.event.addListener(map, 'click', function(){
myinfowindow.close(map);
});
}
</script>
</head>
<body onload="initialize()" align="center" bgcolor="#72baa7" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table style="width:100%;font-size:small;" border="0" cellspacing="2" cellpadding="0" bgcolor="#008000">
<tr>
<td colspan="2" align="center" style="font-size:120%;color:#ffffff"><b>○○周辺地図の表示</b>
</td>
</tr>
<tr>
<td style="width:75%;" align="left" bgcolor="#FFFFCC" valign="middle">
<div id="map_canvas" style="width:100%; height: 480px"></div>
</td>
<td style="width:25%;background-color:#fffccc;padding:4px;" valign="top">
<div align="center" style="font-size:80%;background-color:#eeefff;padding:4px;">○○周辺地図地名</div>
<ol style="list-style-position: inside;list-style-type: upper-alpha;margin-left:0px;padding:0px;font-size:90%;height:410px;overflow-y: scroll;">
<li id="mark_0" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">姫路城(地名を入れます)
</a></li>
<li id="mark_1" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_2" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_3" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_4" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_5" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_6" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_7" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_8" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_9" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_10" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_11" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_12" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_13" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_14" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_15" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_16" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_17" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_18" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_19" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_20" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_21" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_22" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_23" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_24" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
<li id="mark_25" style="padding:2px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:2px;">
</a></li>
</ol>
<br>
</td>
</tr>
</table>
</body>
</html>
利用方法
※2018/6/11よりgoogleのApiキーが必要で一定以上の呼び出しは有料となりました。上記「key=YOUR_API_KEY」の部分となります
1.サンプルコードをテキストエディタにコピーします
2.名前を付け(例えばtest.htmlのように)、「html」ファイルとしてUTF-8で保存します。
3.保存したファイルがブラウザで表示されるかどうかテストします。
4.サンプルコードをテキストエディタで必要な個所を編集します。
追加したい項目の設定は１か所に付き
・位置(緯度,経度)
・情報ウィンドウの中身(htmlも可)
・右横の枠の入力(場所の名前)
以上の3か所を1グループとして編集することが必要です
もちろんこのままデスクトップに設置すれば十分地図を自由に編集し見ることができます。
投票数:92
平均点:5.22
