質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

グーグルマップを導入しているのですが、JSのフックのIDにCSSを当てないようにc-gmap-wrap__main-mapというクラス名を付けたのですが、なぜか、mapがページトップに飛んでしまいます

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,238
退会済みユーザー

退会済みユーザー

グーグルマップを導入しているのですが、JSのフックのIDにCSSを当てないようにc-gmap-wrap__main-mapというクラス名を付けたのですが、なぜか、mapがページトップに飛んでしまいます。

CSSはIDに当てないといけない仕様なのでしょうか?

・html
<div class="c-gmap-wrap">
<div id="map" class="c-gmap-wrap__main-map"></div>

・css下記だとうまくいく

/* Map
   ----------------------------------------------------------------- */
.gmap-wrap {
    position: relative;
    padding-bottom: 120%;
    margin-top: 2rem;
    height: 0;
    overflow: hidden;
}


@media (min-width: 48em) {
.gmap-wrap {
    padding-bottom: 75%;
}
}

@media (min-width: 75em) {
.gmap-wrap {
    padding-bottom: 65%;
}
}

#map {
    width: 100%;
    height: 99%;/*heightはボーダー分もいれて100となるので、100以下にする。*/
    position: absolute;
    top: 0%;
    left: 0;
    border: medium solid #FFF;
    border-bottom: medium solid #FFF !important;
    box-sizing: border-box;/*パディングとボーダーを幅と高さに含める*/
    pointer-events:none;/*Map上での拡大縮小などを無効にする*/
}

・下記はうまくいかない。

/* Map
   ----------------------------------------------------------------- */
.gmap-wrap {
    position: relative;
    padding-bottom: 120%;
    margin-top: 2rem;
    height: 0;
    overflow: hidden;
}


@media (min-width: 48em) {
.gmap-wrap {
    padding-bottom: 75%;
}
}

@media (min-width: 75em) {
.gmap-wrap {
    padding-bottom: 65%;
}
}

.c-gmap-wrap__main-map {
    width: 100%;
    height: 99%;/*heightはボーダー分もいれて100となるので、100以下にする。*/
    position: absolute;
    top: 0%;
    left: 0;
    border: medium solid #FFF;
    border-bottom: medium solid #FFF !important;
    box-sizing: border-box;/*パディングとボーダーを幅と高さに含める*/
    pointer-events:none;/*Map上での拡大縮小などを無効にする*/
}

・JS

function init( )
{
   var mapOptions = {
      //マップが動かないように固定する
      scale_control: true, //縮尺コントーラーを有効化
      scroll_wheel: false, //スクロール操作の無効化
      draggable: false, //ドラッグ操作の無効化
      //end マップが動かないように固定する

      // ズームレベル
      //     数字が小さいほど広域、数字が大きいほど詳細な地図になる
      //     最小値は0、最大値は未定義
      zoom: 17,

      // 地図の種類
      //     ROADMAP: 市街地地図
      //     SATELLITE: 航空写真
      //     HYBRID:     航空写真 + 都市名等
      //     TERRAIN:   地形の特徴と植物の分布
      mapTypeId: google.maps.MapTypeId.ROADMAP,

      // マップ中心の緯度と経度
      //     緯度経度取得:http://www.geocoding.jp/
      center: new google.maps.LatLng( 33.590, 130.39 )// OPT東京オフィス
   };

   // Mapクラスのインスタンスを作成
   var map = new google.maps.Map( document.getElementById( 'map' ), mapOptions ) ;

   var marker =getMarker(
      {
         position: new google.maps.LatLng( 33.590207, 130.39766 ),
         //ポインターを選択時に下記タイトルが表記される
         title: "MyCompany",
         icon: "./img/index/marker.png",
         map: map
      }
   );
}

function getMarker( option )
{
   var marker = new google.maps.Marker( option );
   return marker;
}

//HTMLとjavascriptを分離する為。
google.maps.event.addDomListener( window, 'load', init ) ;
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

もしかして、CSS詳細度の話でしょうか?

詳細度というのは、CSSのある要素に対する宣言同士がぶつかった時に解決策として用いる、計算によって導き出される値の事です。
"カスケード"について - CSS Dencitie

大雑把に言いますと、一意属性(IDなど)指定のCSSは、その他の属性(classなど)指定のCSSより優先される、ということです。 
 
 
 
蛇足になりますが、上記記事は厳密に言うと間違っています。私のブログ記事をご参照ください。

「3つの数字を(大きな基数の数値表現で)a-b-cの順につなげると詳細度が得られる」
バキュラとCSS詳細度 - 不動産屋のラノベ読み

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/05 16:02

    ありがとう。出来たようです

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • JavaScriptに関する質問
  • グーグルマップを導入しているのですが、JSのフックのIDにCSSを当てないようにc-gmap-wrap__main-mapというクラス名を付けたのですが、なぜか、mapがページトップに飛んでしまいます