GoogleMap左上の白い枠を消す

公開日: : 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>

関連記事

icon_kaiten

要素を回転させる

jQueryのanimateメソッドを使って要素を回転させてみるプログラム。 サンプルデータ $('#box1').animate( {'z-index': 1},//z-inde...

記事を読む

js

スムーススクロールを作る – 基礎

ページトップへするするとスクロールするプログラムを作ります。 必要な値は? ページ内スクロールをした際のゴール地点の値:html,bodyのy座標「0」 画面に必要なパーツは? ...

記事を読む

js

スムーススクロールを作る – 応用

指定位置にするするとスクロールするプログラムを作ります。 必要な値は? ページ内スクロールをした際のゴール地点「y座標」の値 画面に必要なパーツは? 高さのあるコン...

記事を読む

icon_h

JSでhtmlspecialcarsと同じ処理をするには

JavaScriptでHTMLで意味のある記号をエスケープするにはオリジナル関数を用意する必要があります。PHPでいうhtmlspecialchars関数が用意されていません。 HTMLで意味の...

記事を読む

icon_rireki

履歴の残る検索置換

データの整理をしていたら昔のソースコードがでてきた。しかもDOMの操作でjQuery使わなかったから面倒だった気がする。 サンプルデータ 履歴の残る検索置換 HTML <h1...

記事を読む

icon_fadein

順番に画像をフェードイン表示する

ジュエリーショップのサイトを作った時のプログラム。商品写真が順番に表示されるので、目に止まりやすい気がする。 サンプルデータ HTML <...

記事を読む

icon_surusuru

指定位置にするするスクロール

最近のサイトでは当たり前のように実装されているするするスクロールをjQueryで書いてみる。 基本:ページトップへ戻る <a id="pagetop" href=&q...

記事を読む

icon_scroll

スクロール位置を取得

スクロール位置を取得して80%以上スクロールしたら背景色を変えるプログラム。 サンプルデータ $(function() { $(window).scroll(function() { ...

記事を読む

icon_nl2br

JSでnl2brと同じ処理をするには

textareaのような複数行の入力値をブラウザに表示する時、改行コードをbrタグに置き換えることができると便利。PHP だと標準で用意されているnl2br関数がJavaScriptにはないので用...

記事を読む

icon_replaceall

JSでreplaceAllと同じ処理をするには

JavaScriptで全件検索置換するにはオリジナル関数を用意する必要があります。PHPでいうreplaceAll関数が用意されていません。 全件検索置換する関数 function repla...

記事を読む

wp
WordPressフロントページ設定とテンプレート

固定ページに最新投稿一覧を表示させた時の使用テンプレートが何なのか調べる機会があったので保存。 管理画面「設定」→「表示設定」の「フロントページの表示」 「最新の投稿」選択時 フロントページ...

js
GoogleMap左上の白い枠を消す

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

wp
WordPressでよく使う関数

string get_site_url( ] ] ) 管理者ページの「設定」-「一般」の「WordPressのアドレス(URL)」 現在のブログのサイトURL取得 [php]<?php ...

wp
WordPressにFacebookのいいねボタン

WordPressにFacebookのいいねボタンを表示する。 コピペで対応したい時用 <body>の直後に記述するコード <div id="fb-root&qu...

js
スムーススクロールを作る – 応用

指定位置にするするとスクロールするプログラムを作ります。 必要な値は? ページ内スクロールをした際のゴール地点「y座標」の値 画面に必要なパーツは? 高さのあるコン...

→もっと見る

    • icon_sublime1
      41,217 views

      ファイルの操作 ファイル名を検索して開く Windows:Ctrl+P Mac:Cmd+P 表示された入力欄にファイル名の一部を入力すると検索結果が表示されるので選択して開きます。 使用言語の指定 Windows:Ctrl+Shift+P Mac:Cmd+Shift+P 表示された入力欄に使用する言語名の一部を入力すると検索結果に「Set Syntax」が表示されるので選択しま...

    • 曜日番号
      17,999 views

      現在の曜日番号を表示 [php]<?php //現在の曜日番号(日:0 月:1 火:2 水:3 木:4 金:5 土:6)を取得 $weekno = date('w'); //現在の曜日番号出力 echo $weekno; ?>[/php] 現在の曜日を表示 [php]<?php //日本語の曜日配列 $weekjp = array( '日', //0 ...

    • wp
      8,630 views

      WordPressの固定ページに投稿ページの最新記事を表示する。 [php]<?php //最新5件を表示 $paged = get_query_var('paged'); //現在のページ番号 $num = 5; //表示件数 query_posts('posts_per_page='.$num.'&paged='.$paged); if ( have_posts() ) :...

    • groupby
      6,344 views

      まずここをチェック!を先に 「フィールド名=NULL」はダメ 「フィールド名 IS NULL」を使う やりたいこと 会員を全員の名前を表示したい 最新の予約日付を表示したい 使用するテーブル 会員テーブル [ps]mysql> SELECT * FROM member; +----+--------+ | id | name | +----+----...

    • icon_kaiten
      5,788 views

      jQueryのanimateメソッドを使って要素を回転させてみるプログラム。 サンプルデータ [js] $('#box1').animate( {'z-index': 1},//z-indexを0から1に変更する { duration: 1000, //アニメーションの時間 //ステップ中の処理 //引数num:処理途中の変化している値 step: f...

PAGE TOP ↑
←幅を狭くする