Google Maps APIが、条件分岐で表示させようとするとエラーになる

Question

Google Maps APIを利用して、ページごとに違うストリートビューを表示させようとしています。

ページごとに単体で設定するとうまく表示されますが、if文などでページごとに表示を変えるように条件分岐すると表示されません。

単体

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD0i8IpH4sIQ76FC6wt2sEp_AqiwZQqbLw"></script>
<script>
    function initialize() {
        var fenway = new google.maps.LatLng(33.8085037,132.8172208);
        var panoramaOptions = {
            position: fenway,
            pov: {
            heading: 1,
                pitch: 10
            }
        };
        panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);

        var i = 220;
        window.setInterval(function () {
            panorama.setPov({
                heading: i,
                pitch: 10,
                zoom: 1
            });
            i += 0.1;
        }, 10);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>

---

条件分岐
途中で確認のためにdocument.writeで表示させても、ちゃんとURLとviewpointは格納されています。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD0i8IpH4sIQ76FC6wt2sEp_AqiwZQqbLw"></script>
        <script>
            var panorama;
            var viewpoint;
            var url = window.location.href;

            if (url == "http://www.sample.jp/"){
              viewpoint = "33.8530625,132.7524527";
                        
            } else if (url == "http://www.sample.jp/public.html") {
                viewpoint = "33.8816834,132.7548918";
                
            } else if (url == "http://www.sample.jp/faq.html"){
                viewpoint = "33.854079,132.7864186";                
            }
            
            document.write(url,viewpoint);

            function initialize() {
                var fenway = new google.maps.LatLng(viewpoint);
                var panoramaOptions = {
                    position: fenway,
                    pov: {
                    heading: 1,
                        pitch: 10
                    }
                };
                panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);

                var i = 220;
                window.setInterval(function () {
                    panorama.setPov({
                        heading: i,
                        pitch: 10,
                        zoom: 1
                    });
                    i += 0.1;
                }, 10);
            }

            google.maps.event.addDomListener(window, 'load', initialize);

</script>

ちなみに、Javascriptコンソールにはエラーは出ていません。

ちょっと原因が解らず困っております。
よろしくお願い致します。

Answer 1

google.maps.LatLngの引数が文字列になっているのが問題なのだと思います。
下記のようにしてみてはどうでしょうか？
https://syncer.jp/google-maps-javascript-api-matome/latlng/

var lat;
var lng;
if (url == "http://www.sample.jp/"){
	lat = 33.8530625;
	lng = 132.7524527;

} else if (url == "http://www.sample.jp/public.html") {
	lat = 33.8816834;
	lng = 132.7548918;
} else if (url == "http://www.sample.jp/faq.html"){
	lat = 33.854079;
	lng = 132.7864186;
}
 var fenway = new google.maps.LatLng(lat, lng);

Comments

[samlife]

ありがとうございます。
これは配列では？
と気づいたので、
var viewpoint = [33.8530625,132.7524527];

のように入れて、

var fenway = new google.maps.LatLng(viewpoint[0],viewpoint[1]);

のようにしてみたら、表示はされました。

が、なぜかカクカクします・・・
別の原因でしょうかね

[退会済みユーザー]

「カクカクする」というのは地図を動かすときにカクカクするのでしょうか？
その現象は「単体」のときは起こらないのでしょうか？

[退会済みユーザー]

地図の動作がカクカクする（重い？）のであれば、ライトモードを使ってみてはどうでしょうか？

http://d.hatena.ne.jp/ozuma/20140702/1404273464

Answer 2

var point = new google.maps.LatLng( 33.8085037, 132.8172208 );
```これと
```JavaScript
var point = new google.maps.LatLng( "33.854079, 132.7864186" );
```これは、意味が違います。

前者は LatLng メソッドに 数字を2つ渡していて、後者はテキストをひとつ渡しています。（LatLngメソッドはテキストを受け付ける仕様になっていない）

なので
```JavaScript
viewpoint_lat = 33.8530625;
viewpoint_lng = 132.7524527;
// (中略)
var fenway = new google.maps.LatLng( viewpoint_lat, viewpoint_lng );
```か
```JavaScript
viewpoint = { lat: 33.8530625, lng: 132.7524527 };
// (中略)
var fenway = new google.maps.LatLng(viewpoint);
```と LatLngLiteral で書くかどちらかです。

【Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers】
[https://developers.google.com/maps/documentation/javascript/reference#LatLng](https://developers.google.com/maps/documentation/javascript/reference#LatLng)

Comments

[samlife]

var point = new google.maps.LatLng( 33.8085037, 132.8172208 );

の場合、これは配列ということでいいのでしょうか？

もし配列であれば、

var fenway = new google.maps.LatLng(point[0],point[1]);

という入れ方でもいいでしょうか？

というか、それでやってみましたが、表示はされました。
が、それが原因かわかりませんが、カクカクします。

[kei344]

配列ではありません。