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

Question

前提・実現したいこと

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/ツールのバージョンなど）

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

Answer 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;が、必ず実行されていることも分かるかと思います。

■　条件文

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

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

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

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

Comments

[Treapyon]

ありがとうございます。
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 }
で、結果出ました。

[Treapyon]

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

Answer 2

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

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

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

Comments

[Treapyon]

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