2014年6月12日木曜日

Map Methods setMapTypeId(mapTypeId:MapTypeId|string)


地図の表示タイプを設定します。
表示タイプは下記のような種類があります。

通常の地図   :google.maps.MapTypeId.ROADMAP
航空写真    :google.maps.MapTypeId.SATELLITE
地図+航空写真 :google.maps.MapTypeId.HYBRID
地形      :google.maps.MapTypeId.TERRAIN

もし文字列(String型)で設定するなら、
roadmap や satellite などで設定します。
ただ、基本的にはgoogleの提供している定数で指定した方が良いと思います。
roadmapと言う文字列で設定した場合、
google側で文字列の変更などがあった場合、
最悪地図が表示されなくなってしまう場合もありえるので。

ではサンプルです。
地図下の地形表示をクリックすると、
地図が地形表示に変更されます。

<!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 mapOptions = {
                zoom: 15,
                center: latlng
            };
            var gmap = new google.maps.Map(map, mapOptions);

            var button = document.getElementById("button");
            google.maps.event.addDomListener(button, "click", function () {
                gmap.setMapTypeId(google.maps.MapTypeId.TERRAIN);
            });
        });
    </script> 
</head> 
<body> 
    <div id="map_canvas" style="width: 400px; height: 400px"> </div> 
    <span id="button" style="cursor:pointer;"> [ 地形表示 ]</span> 
</body> 
</html> 

[ 地形表示 ]
このエントリーをはてなブックマークに追加

0 件のコメント:

コメントを投稿