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

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

ただいまの
回答率

89.70%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,486

ths

score 15

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"});
});

結果画面
イメージ説明

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

viewportの設定はされていますか?
https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

されていれば、
レスポンシブなのかどうかわかりませんが、
PCの時とスマホの時で、フォントサイズを変えてみるとどうでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/29 20:19

    viewportの設定はしたのですが変化ありません...
    map内のフォントサイズを変える方法がわかりません。

    キャンセル

  • 2018/01/29 21:25

    ズーム率の問題でもないでしょうか?
    ソースを提示していただけたり、キャプチャ画像などいただけると幸いです。

    キャンセル

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

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