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

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

ただいまの
回答率

88.57%

googleマップでウインドウサイズに応じてzoomを変更したい。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 666

Treapyon

score 13

 前提・実現したいこと

googlemapとphpのdbを使っての複数のピンを立てることまではうまくいきました。
そのうえで、pcでのzoom スマホでのzoomをウィンドウサイズで変更したいです。
zoom のサイズに変数zomを入れてますが、if文が走らないです。
それでも、最後のzom=14が適用されて、表示は行けてますが、
ウインドウサイズを変更しても、地図が縮小されません。
よろしく、ご鞭撻お願いいたします。

function initMap() {
if (0 <=  window.innerWidth <= 480)
                  var zom = 6 
else if  (480 < window.innerWidth <= 620)
                  var zom = 8            
else if  (620 < window.innerWidth <= 800)
                  var zom = 10 
else   (800 <  window.innerWidth )
                  var zom = 14;
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(34.847945, 135.630651),
          zoom: zom
        });

 該当のソースコード

if (0 <=  window.innerWidth <= 480)
                  var zom = 6 
else if  (480 < window.innerWidth <= 620)
                  var zom = 8            
else if  (620 < window.innerWidth <= 800)
                  var zom = 10 
else   (800 <  window.innerWidth )
                  var zom = 14;

 試したこと

window.innerWidthをいろいろ、変えてはみましたが、何かが足りないとはわかっていますが、何が足りないかが、わからないです。

 補足情報(FW/ツールのバージョンなど)

お返事、お待ちしております。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+1

惜しい気はしますが、

javascriptのif文が想定通りに書けていませんし、条件文自体も指定の仕方が間違っているようです。

{} や、; は、省略しても問題なく動く部分もありますが、不具合の原因にもなります。
javascriptを書き慣れていないのであれば、省略しない方が良いと思いますよ。

■ if文
今のコードに、{}を付けて、条件毎に処理される範囲を明確にしてみましょう。

if (0 <=  window.innerWidth <= 480){
                  var zom = 6 
}else if  (480 < window.innerWidth <= 620){
                  var zom = 8            
}else if  (620 < window.innerWidth <= 800){
                  var zom = 10 
}else{   (800 <  window.innerWidth )}
                  var zom = 14;

最後だけelseなので、{} の中身が、 Treapyonさんが予定していない箇所を囲んでいますよね。
そして、if文の処理が終わった後で、var zom = 14;が、必ず実行されていることも分かるかと思います。

■ 条件文

数値の範囲を1つの条件となるような感じで0 <=  window.innerWidth <= 480を書いたようですが、これはjsでは正しくチェックされません。
上限と下限のチェックは個別に書かなくてダメです。

正しい書き方は、0 <= window.innerWidth && window.innerWidth <= 480です。

ちなみにですが、数値の範囲のように見える0 <=  window.innerWidth <= 480は、
実際には(0 <=  window.innerWidth) <= 480として評価されています。

0 <=  window.innerWidth はtruetrue(数値にすると1) <= 480trueなので、
今のコードはいつでも最初のif文の分岐処理が実行されています。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/08 17:43

    ありがとうございます。
    if (0 <= window.innerWidth && window.innerWidth <= 480){
    var zom = 12
    }else if (480 < window.innerWidth && window.innerWidth <= 800){
    var zom = 13
    }else if (800 < window.innerWidth ){
    var zom = 14 }
    で、結果出ました。

    キャンセル

  • 2018/11/08 17:54

    追伸、
    var zom = 14 } ;
    最後に;をつけ忘れてました。
    すごく助かりました。ありがとうございます。

    キャンセル

0

該当のソースコードに書かれている
var zom = x;
とはzomという変数に値を代入しているだけなので、以下のようにmapオブジェクトにセットする必要があります。
map.setZoom(x);

そして、この処理はウインドウサイズを変更したイベントで実行されていると思いますが、mapオブジェクトはinitMap関数のローカル変数になっているので、グローバル変数的にする必要があります。

※最新のGoogleMapの仕様は追っていません。setZoomでエラーになる場合は、最新の仕様に合わせて実装してください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/08 17:45

    ありがとうございます。
    もっと、勉強して、map.setZoom();
    が、使えるよう、がんばります。

    キャンセル

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

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

関連した質問

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