2014年8月25日月曜日

MapOptions Properties mapTypeControlOptions


このプロパティは地図タイプコントロールの
スタイルや配置場所、表示する地図コントロールの種類などを
まとめて設定するプロパティです。

設定できる項目は
・地図タイプの種類
・表示場所
・表示形式
です。

サンプルでは
表示位置を上中央にし、
選択できる地図タイプを「地図」「地図+写真」「地形」にし、
表示スタイルをドロップダウンメニューにしました。
「地形」はある程度ズームアウトした状態でないと有効になりません。

以下サンプルです。
<!DOCTYPE html> 
<html lang="ja"> 
<head> 
    <meta charset="utf-8" /> 
    <title> google maps api v3</title> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> 
    <script type="text/javascript"> 
        google.maps.event.addDomListener(window, "load", function () {
            var map = document.getElementById("map_canvas");
            var latlng = new google.maps.LatLng(35.658580, 139.745433);
            var mapTypeControlOptions = {
                mapTypeIds: [
                    google.maps.MapTypeId.ROADMAP, // 地図
                    google.maps.MapTypeId.TERRAIN, // 地形
                    google.maps.MapTypeId.HYBRID   // 地図+写真
                ],
                // 上中央に配置
                position: google.maps.ControlPosition.TOP_CENTER,
                // ドロップダウンメニューで表示
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            };
            var mapOptions = {
                zoom: 18,
                center: latlng,
                mapTypeControlOptions: mapTypeControlOptions
            };
            var gmap = new google.maps.Map(map, mapOptions);
        });
    </script> 
</head> 
<body> 
    <div id="map_canvas" style="width: 400px; height: 400px"> </div> 
</body> 
</html> 


このエントリーをはてなブックマークに追加

0 件のコメント:

コメントを投稿