グーグルマップを導入しているのですが、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 ) ;
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/08/05 07:02