GoogleMap左上の白い枠を消す

公開日:2015年06月23日

JavaScript

左上の白い枠を消してほしいという要望が多いので。よく使うマップコードをスクラップ。

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>グーグルマップのテスト</title>  
<style>  
#map-canvas {
    width: 600px;  
    height: 400px;  
    border: 1px solid #CCC;  
}  
</style>  
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.1.exp&sensor=false"></script>  
<script>  
var map;  
function initialize() {
    var mapOptions = {
        //中心地：緯度・経度
        center: new google.maps.LatLng(36.558701, 139.898283),

        //ズームレベル：小さい(広域)⇔大きい(詳細)
        zoom: 17,

        //地図タイプ：ROADMAP(2D)、SATELLITE(写真), HYBRID(写真+道路・地名), TERRAIN(起伏)
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        //地図タイプ切り替えボタン：true(表示), false(非表示)
        mapTypeControl: false,

        //スケールコントローラ
        scaleControl: true,

        //移動コントローラ：true(表示), false(非表示)
        panControl: false,

        //ストリートビューコントロール：true(表示), false(非表示)
        streetViewControl: true,

        //ズームコントロール：true(表示), false(非表示)
        zoomControl: true,
        //ズームコントロールの種類：LARGE, SMALL, DEFAULT(地図サイズに合わせて可変)
        zoomControlOptions: {
          style:google.maps.ZoomControlStyle.SMALL
        },
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    //マーカー表示
    var marker = new google.maps.Marker({
        //マーカー位置：緯度・経度
        position: new google.maps.LatLng(36.558701, 139.898283),
        map: map
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas">&nbsp;</div>
</body>
</html>

いろいろ試してみたバージョン

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>グーグルマップのテスト</title>  
<style>  
#map-canvas {
    width: 600px;  
    height: 400px;  
    border: 1px solid #CCC;  
}  
</style>  
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.1.exp&sensor=false"></script>  
<script>  
var map;  
function initialize() {
    var mapOptions = {
        //中心地：緯度・経度
        center: new google.maps.LatLng(36.558701, 139.898283),

        //ズームレベル：小さい(広域)⇔大きい(詳細)
        zoom: 17,

        //地図タイプ：ROADMAP(2D)、SATELLITE(写真), HYBRID(写真+道路・地名), TERRAIN(起伏)
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        //地図タイプ切り替えボタン：true(表示), false(非表示)
        mapTypeControl: true,
        //地図タイプボタンの種類(地図タイプ切り替えボタンTRUE時のみ)：ROADMAP(2D), SATELLITE(写真), HYBRID(写真+道路・地名), TERRAIN(起伏)
        mapTypeControlOptions: {
          mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.HYBRID
          ]
        },

        //ナビゲーションコントローラの非表示：true(非表示), false(表示)
        disableDefaultUI: false,

        //スケールコントローラ：true(表示), false(非表示)
        scaleControl: true,
        //コントローラ位置(他コントローラもpositionで指定可能)
        //TOP_LEFT(上左), TOP_CENTER(上中), TOP_RIGHT(上右)
        //BOTTOM_LEFT(下左), BOTTOM_CENTER(下中), BOTTOM_RIGHT(下右)
        //LEFT_TOP(左上), LEFT_CENTER(左中), LEFT_BOTTOM(左下)
        //RIGHT_TOP(右上), RIGHT_CENTER(右中), RIGHT_BOTTOM(右下)
        scaleControlOptions:{
          position: google.maps.ControlPosition.TOP_LEFT
        },

        //概要地図コントロール(右下の概要地図)：true(表示), false(非表示)
        overviewMapControl:true,
        //概要地図の表示・非表示状態：true(表示), false(非表示)
        overviewMapControlOptions:{
          opened: true
        },

        //移動コントローラ：true(表示), false(非表示)
        panControl: true,
        //コントローラ位置
        panControlOptions: {
          position: google.maps.ControlPosition.TOP_LEFT
        },

        //ストリートビューコントロール：true(表示), false(非表示)
        streetViewControl: true,
        //コントローラ位置
        streetViewControlOptions: {
          position: google.maps.ControlPosition.TOP_LEFT
        },

        //ズームコントロール：true(表示), false(非表示)
        zoomControl: true,
        //ズームコントロールの種類：LARGE, SMALL, DEFAULT(地図サイズに合わせて可変)
        zoomControlOptions: {
          style:google.maps.ZoomControlStyle.SMALL
        },

        /* 廃止されました
        //ナビゲーションコントローラ：true(表示), false(非表示)
        navigationControl: false,
        //ナビゲーションコントローラの種類：DEFAULT(地図の大きさで自動変更), SMALL(小さいズームボタン), ANDROID(下にズームボタン), ZOOM_PAN(ズームボタンと移動パッド)
        navigationControlOptions: {
          style: google.maps.NavigationControlStyle.SMALL
        },
        */

    };  
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    //マーカー表示
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(36.558701, 139.898283),
        map: map
    });
    //情報ウィンドウ表示
    var iw = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, 'click', info);
    function info(){
            iw.setContent("情報ウィンドウ内の文字");
            iw.open(map, marker);
    }
    info();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas">&nbsp;</div>
</body>
</html>

コンテンツ一覧

同じカテゴリーのコンテンツ