GoogleMap API V3で番号付きマーカーを動的に生成
今回は、GoogleMap API V3で番号つきマーカーを動的に生成して表示するサンプルです。
マーカーのピンの生成は、Google Chart APIを使います。
作成方法は簡単で、Google Chart APIは、番号つきのピンと影を生成できて、Google Map APIはマーカーのピンと影をそれぞれURL指定できるので、そこにGoogle Chart APIのURLを指定するだけです。
Google Chart APIでは、影つきピンも生成できますが、下のようにピンと影が少し離れているので、ピンと影をそれぞれ指定しました。
ピンの生成は、http://chart.apis.google.com/chartのパラメータとして以下の値を設定します。
chst=d_map_pin_letter&chld=<character>|<fill_color>|<text_color>
例えば、http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ff7e73|000000 は、以下のアイコンになります。
その他にも、ピンを斜めにしたり色々できますが、詳しくはDynamic Icons - Google Chart Tools: Image Charts - Google Codeに書かれています。
JavaScriptはこちら。
ピンは指し示す位置が画像の中央ですが、影の場合は中央ではないため、影のピンの指し示す位置を座標で指定しています。これを行わないと地図上でピンの位置がずれてしまいます。
/**
* GoogleMapの表示
* @param {String} id 表示領域ID
* @param {Object} option google.maps.Mapに設定するオプション
* @param {Object} markerArray マーカーデータ配列
* @param {Object} isNumberPin 番号付きマーカーで表示するか
*/
var viewGoogleMap = function(id, option, markerArray, isNumberPin){
/**
* マーカーのクリックイベントリスナーの登録
* @param {google.maps.Marker} marker マーカーオブジェクト
* @param {Object} markerData マーカーに設定する情報ウィンドウデータ
*/
var setMarkerClickListener = function(marker, markerData) {
google.maps.event.addListener(marker, 'click', function(event) {
if (openInfoWindow) {
openInfoWindow.close();
}
openInfoWindow = new google.maps.InfoWindow({
content: markerData.content
});
google.maps.event.addListener(openInfoWindow,'closeclick',function(){
openInfoWindow = null;
})
openInfoWindow.open(marker.getMap(), marker);
});
};
/**
* マーカーデータのセット
* @param {Object} makerArray マーカーデータ
*/
var setMarkerData = function(makerArray) {
// 登録データ分のマーカーを作成
for (var i = 0; i < makerArray.length; i++) {
var marker = new google.maps.Marker({
position: makerArray[i].position,
title: makerArray[i].title,
map: gmap,
icon: isNumberPin ? new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+ (i + 1) + "|ff7e73|000000") : null,
shadow:isNumberPin ? new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",null,null, new google.maps.Point(12, 35) ) : null
});
// マーカーのclickリスナー登録
setMarkerClickListener(marker, makerArray[i], true);
}
};
option = option ? option : {};
if(id == null){
return;
}
var mapOption = {
zoom: option.zoom || 16,
center:option.center || new google.maps.LatLng(34.687463, 135.18813),
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
};
var gmap = new google.maps.Map(document.getElementById(id), mapOption);
var openInfoWindow;
if(markerArray){
setMarkerData(markerArray);
}
}
htmlは、こちら
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize(id){
var data = new Array();
data.push({position: new google.maps.LatLng(34.687574,135.189857), title: 'ローソン', content: 'ローソン 神戸中央西町 <br/><a href=\'http://www.lawson.co.jp/\'>HP</a>'});
data.push({position: new google.maps.LatLng(34.6882,135.188087), title: '南京町広場', content: '南京町広場'});
var map = viewGoogleMap(id,null,data,true);
}
</script>
<script src="./js/gmap.js" type="text/javascript"></script>
<title>GoogleMapTest2</title>
</head>
<body onload="initialize('gmap_canvas')">
<div id="gmap_canvas" style="width: 480px; height: 320px;"></div>
</body>
</html>
参考：
