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

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

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

・html

・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 ) ;