Google Map JavaScript APIをスマホで表示させたとき

Google Map JavaScript APIをスマホで表示させたいのですが、PC基準のため文字サイズが小さいです。地図中の文字サイズを変更するにはどうすればよいのでしょうか。ちなみに地図を全画面表示にするとちゃんとスマホに適したフォントサイズになります。できれば最初から全画面で表示させたいのですが、調べてやってみても全画面になりません。以下がソースコードと結果の画面を掲載いたします。

shelter.html

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

  <link rel="stylesheet" type="text/css" href="../css/lib/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="../css/style.css">

  <style type="text/css">
  </style>

  <script type="text/javascript" src="../js/lib/jquery.js"></script>
  <script type="text/javascript" src="../js/lib/bootstrap.js"></script>
  <script type="text/javascript" src="../js/menuBar.js"></script>

</head>
<body onload="initMap()">
  <section id="topBar">Shelter</section>
  <section id="menuBar"></section>

	<section class="section" id="map"></section>
  <script type="text/javascript" src="../js/shelter.js"></script>
  <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtcw7OkAR2a3ItvtPkU53Kh3Z5PTlqK8U">
  </script>
</body>
</html>

shelter.js

// 地図描画処理
function initMap() {

  // マーカーにクリックイベントを追加
  function markerEvent(i) {
      marker[i].addListener('click', function() { // マーカーをクリックしたとき
        infoWindow[i].open(map, marker[i]); // 吹き出しの表示
      });
  }

	var marker = [];
	var infoWindow = [];
	var data = [  //マーカを立てる場所、緯度、経度
		{
			name: 'West Elementary School',
		  lat: 36.592415,
		  lng: 136.636825
		}
	];


  // Geolocation APIに対応している
  if (navigator.geolocation) {
    // 現在地を取得
    navigator.geolocation.getCurrentPosition(
      // 取得成功した場合
      function(position) {
        // 緯度・経度を変数に格納
        var mapLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        // マップオプションを変数に格納
        var mapOptions = {
          zoom : 20,          // 拡大倍率
          center : mapLatLng,  // 緯度・経度
        };
        // マップオブジェクト作成
        var map = new google.maps.Map(
          document.getElementById("map"), // マップを表示する要素
          mapOptions         // マップオプション
        );
        //現在地にマーカーを立てる
        var current = new google.maps.Marker({ // マーカーの追加
            position: mapLatLng, // マーカーを立てる位置を指定
            map: map // マーカーを立てる地図を指定
        });

        
        //マーカー毎の処理
        for (var i = 0; i < data.length; i++) {
        	var markerLatLng = new google.maps.LatLng({lat: data[i]['lat'], lng: data[i]['lng']}); // 緯度経度のデータ作成
        	marker[i] = new google.maps.Marker({ // マーカーの追加
         		position: markerLatLng, // マーカーを立てる位置を指定
            map: map // マーカーを立てる地図を指定
       		});

       		infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
           		content: '<div class="mapInfo">' + data[i]['name'] + '</div>' // 吹き出しに表示する内容
         		});
   
       		markerEvent(i); // マーカーにクリックイベントを追加
        }
      },

      // 取得失敗した場合
      function(error) {
        // エラーメッセージを表示
        switch(error.code) {
          case 1: // PERMISSION_DENIED
            alert("位置情報の利用が許可されていません");
            break;
          case 2: // POSITION_UNAVAILABLE
            alert("現在位置が取得できませんでした");
            break;
          case 3: // TIMEOUT
            alert("タイムアウトになりました");
            break;
          default:
            alert("その他のエラー(エラーコード:"+error.code+")");
            break;
        }
      }
    );

  // Geolocation APIに対応していない
  } else {
    alert("この端末では位置情報が取得できません");
  }
}

$(function(){
	$('#map').css({"height": $(window).height() - $(window).height()*0. + "px"});
});

結果画面