以前、UIのコントロールの部分について書き、その後、すべてのコントロールを非表示にする方法に書きました。
今日は、各コントロールを表示するかどうか操作する方法について
new google.maps.Map()メソッドの第二引数に、JSONファイルを入れるのですが、そのkeyに
{
navigationControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean
} |
をそれぞれ設定するばいいそうです。
つまり、
Navigationを操作したい場合は、navigationControlを
MapTypeを操作したい場合は、mapTypeControlを
そして、Scaleは、scaleControlを
それぞれ、booleanで指定すれば、表示、非表示をコントロールすることができます。
サンプルを作りました。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="map_canvas_05" style="width:400px; height:500px;"></div>
<script type="text/javascript">
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8
, center: latlng
, mapTypeId: google.maps.MapTypeId.ROADMAP
, navigationControl: false
, mapTypeControl: false
, scaleControl: true
};
var map_05 = new google.maps.Map(
document.getElementById("map_canvas_05")
, myOptions
);
</script>
</body>
</html> |
上の例では、navigationとmapTypeを表示せず、代わりに、scaleを表示させています。
実行結果は、このようになります。
0 コメント:
コメントを投稿