selectをカスタムコントロールとして設置する
ここでは、カスタムコントロール内にselectフォームを入れるサンプルを紹介します。
サンプル
このサンプルは、カスタムコントロールとして設定するdivの中にselectフォームが入っています。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100% }
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var latlng = new Array();
// 初期化。bodyのonloadでinit()を指定することで呼び出してます
function init() {
// 秋葉原
latlng[0] = new google.maps.LatLng(35.69839680452033,
139.77325916290283);
// 新宿
latlng[1] = new google.maps.LatLng(35.69024112601506,
139.7004747390747);
// 池袋
latlng[2] = new google.maps.LatLng(35.729652511434224,
139.71086025238037);
// 御徒町
latlng[3] = new google.maps.LatLng(35.70756223398587,
139.77484703063965);
// 巣鴨
latlng[4] = new google.maps.LatLng(35.73351942211786,
139.73944187164307);
// Mapコンストラクタ用のMapOptions
var opts = {
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng[0] // 初期値は秋葉原
};
// getElementById("map")の"map"は、body内の<div id="map">より
map = new google.maps.Map(document.getElementById("map"), opts);
var sel = document.getElementById("myselect");
sel.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(sel);
google.maps.event.addDomListener(sel, 'click', function() {
});
}
function selectchanged() {
// selectのオブジェクトを取得
var sl = document.getElementById("sel");
var value = sl.options[sl.selectedIndex].value;
map.setCenter(latlng[value]);
}
//]]>
</script>
</head>
<body onload="init()">
<div id="map"></div>
<div id="myselect">
<select id="sel" onChange="selectchanged()">
<option value="0" selected>秋葉原</option>
<option value="1">新宿</option>
<option value="2">池袋</option>
<option value="3">御徒町</option>
<option value="4">巣鴨</option>
</select>
</body>
</html>
このサンプルでは、selectフォームの内容が変更されるとselectchanged()という自作functionが呼び出されるようになっています。 selectchanged()内では、選択されている項目のvalueを取得して、その値に応じた位置が表示されるようになっていますが、各valueに対応した位置情報は、init()の中でLatLngの配列(Array)として最初に生成しています。
表示例
表示例です。
