Google Maps JavaScript API V3 を使ってページを作っています。http://www.withmama.info/s_map/hatena.php 開いていただくと分かるのですが、左側にロードマップ右側にストリートビューを、「ページを開くと同時に表示」させるのが目的です。


Google では、http://code.google.com/intl/ja/apis/maps/documentation/javascript/examples/streetview-simple.html というサンプルがあります(説明ページは、http://code.google.com/intl/ja/apis/maps/documentation/javascript/services.html#StreetView にある「ストリートビューの場所と視点(POV)」の部分)。

上記のサンプルと説明ページを基に、いろいろやってみたのですが、右側のストリートビューの部分がページを開いた段階では、表示されません。左側のロードマップの人形をロードマップに載せると表示が開始されるのですが・・・。

どなたか該当ページのソースをご高覧の上で、ご教示いただけませんか?

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2011/05/15 11:16:09
  • 終了:2011/05/15 19:38:58

ベストアンサー

id:asuka645 No.5

あすか回答回数856ベストアンサー獲得回数972011/05/15 18:49:34

ポイント60pt

下記をお試しください。

<?php
$zoom = 16;
$address = '東京都';
$req = 'http://maps.google.com/maps/api/geocode/xml';
$req .= '?address='.urlencode($address);
$req .= '&sensor=false';
$xml = simplexml_load_file($req) or die('XML parsing error');
if ($xml->status == 'OK') {
    $location = $xml->result->geometry->location;
    $lat = $location->lat;
    $lng = $location->lng;
}
?>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init() {
    var sv = new google.maps.StreetViewService();
    var mapdiv = document.getElementById('map_canvas');
    var lat_input = document.getElementById('lat_input');
    var lng_input = document.getElementById('lng_input');
    var lat = <?php echo $lat;?>;
    var lng = <?php echo $lng;?>;
    var zoom = <?php echo $zoom;?>;
    var latlng = new google.maps.LatLng(lat, lng);
    var myOptions = {
        zoom: zoom,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: true,
    };
    var map = new google.maps.Map(mapdiv, myOptions);  
    var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
    sv.getPanoramaByLocation(latlng, 200, processSVData);

    function processSVData(data, status) {
        if (status == google.maps.StreetViewStatus.OK) {
            var markerPanoID = data.location.pano;
            panorama.setPano(markerPanoID);
            panorama.setPov({
                heading: 180, //東西南北の向き。0なら北、180なら南向き
                pitch: 10,    //上下の角度(90なら真上、-90なら真下を見ている)
                zoom: 1       //ズームの度合い(0は最も広角)
            });
            panorama.setVisible(true);
        }
    }
}
</script>
</head>
<body onload="init()">
<div id="map_canvas" style="width: 400px; height: 300px;"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>
id:ozaki

ありがとうございました。わざわざ、phpファイルに直していただいたんですね。たいへん助かりました。感謝です。

追伸。一番下にも発言させていただきましたが、皆さんから多くの情報をいただきましてたいへんありがとうございました。ただ、IEで見ると「不表示」となってしまいます。この件は別途質問を立てさせていただくつもりです。

ともあれ、本当にみなさんありがとうございました。

2011/05/15 19:37:36

その他の回答(4件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492011/05/15 11:55:45

ポイント20pt

【原因】地図表示用のcenterに指定しているlat, lngをストリートビューに当てはめると「該当する道が無い」

【対処】あなたがストリートビューのスタート地点にしたい場所をposition new google.maps.LatLng(ふが, ほげ);にて指定してやれば問題は解決するでしょう

【余談】今のところ問題になることはないと思いますがjavascriptの中に全角スペースが紛れ込んでいますので除去しておいたほうがよろしいでしょう

他の方のソースを覗いてみるのも良いですよ

http://otani-webs.com/lab/others/100721.html

http://waox.main.jp/news/?p=2536

id:ozaki

早速のご回答、たいへんありがとうございます。

1)教えていただいた情報を基に、試行錯誤をしてみましたが、表示されませんでした。残念です。

2)「javascriptの中に全角スペースが紛れ込んでいます」とのことですが、これはどうやって探せばいいのでしょうか?

2011/05/15 12:47:34
id:asuka645 No.2

あすか回答回数856ベストアンサー獲得回数972011/05/15 15:10:03

ポイント20pt

緯度・経度の値と、StreetViewへのオブジェクト渡しの3カ所を修正すると動くようになります。

下記を参考にしてください。

<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
  function init() {
    var mapdiv = document.getElementById('map_canvas');
    var lat_input = document.getElementById('lat_input');
    var lng_input = document.getElementById('lng_input');
//    var lat = 35.6894875;
//    var lng = 139.6917064;
    var lat = 35.690551;        //★修正箇所
    var lng = 139.69257;        //★修正箇所
    var zoom = 16;
    var latlng = new google.maps.LatLng(lat, lng);
    var myOptions = {
      zoom: zoom,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: true,
    };

      var map = new google.maps.Map(mapdiv, myOptions);   
      var panoramaOptions = {
//     position: new google.maps.LatLng(latlng),
      position: latlng,         //★修正箇所
      pov: {
        heading: 180, //東西南北の向き。0なら北、180なら南向き
        pitch: 10, //上下の角度(90なら真上、-90なら真下を見ている)
        zoom: 1 //ズームの度合い(0は最も広角)
      }
    };
    var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
    map.setStreetView(panorama);
  }

</script>
</head>
<body onload="init()">
<div id="map_canvas" style="width: 400px; height: 300px;"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div> 
</body>
</html>
id:ozaki

ご教示ありがとうございました。ゴメンナサイ、phpファイルなので、ご高覧いただけない部分がありました。該当ページの基のソースは以下です。

$zoom = 16;

$address = '東京都';

$req = 'http://maps.google.com/maps/api/geocode/xml';

$req .= '?address='.urlencode($address);

$req .= '&sensor=false';

$xml = simplexml_load_file($req) or die('XML parsing error');

if ($xml->status == 'OK') {

$location = $xml->result->geometry->location;

$lat = $location->lat;

$lng = $location->lng;

}

?>

<html>

<head>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript"></p> <p> function init() {</p> <p> var mapdiv = document.getElementById('map_canvas');</p> <p> var lat_input = document.getElementById('lat_input');</p> <p> var lng_input = document.getElementById('lng_input');</p> <p> var lat = <?php echo $lat;?>;</p> <p> var lng = <?php echo $lng;?>;</p> <p> var zoom = <?php echo $zoom;?>;</p> <p> var latlng = new google.maps.LatLng(lat, lng);</p> <p> var myOptions = {</p> <p> zoom: zoom,</p> <p> center: latlng,</p> <p> mapTypeId: google.maps.MapTypeId.ROADMAP,</p> <p> streetViewControl: true,</p> <p> };</p> <p> var map = new google.maps.Map(mapdiv, myOptions); </p> <p> var panoramaOptions = {</p> <p>  position: new google.maps.LatLng(latlng),</p> <p>  pov: {</p> <p>   heading: 180, //東西南北の向き。0なら北、180なら南向き</p> <p>   pitch: 10, //上下の角度(90なら真上、-90なら真下を見ている)</p> <p>   zoom: 1 //ズームの度合い(0は最も広角)</p> <p>  }</p> <p> };</p> <p> var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);</p> <p> map.setStreetView(panorama);</p> <p> }</p> <p></script>

</head>

<body onload="init()">

</body>

</html>

2011/05/15 15:29:54
id:Lhankor_Mhy No.3

Lhankor_Mhy回答回数775ベストアンサー獲得回数2302011/05/15 15:10:13

ポイント20pt

こんにちは。

ソース中の

var lng = 139.6917064;

var lng = 139.6911064;

にずらし、かつ

position: new google.maps.LatLng(latlng),

position: latlng,

に修正したところ動きました。

 

全角スペースについてはメモ帳などで検索や置換すればとりあえずはいいと思いますが、この先コーディングする際は全角スペースを表示してくれるエディタを使う方が何かと便利ですよ。

id:ozaki

ご教示ありがとうございました。ゴメンナサイ、phpファイルなので、ご高覧いただけない部分がありました。該当ページの基のソースは以下です。

$zoom = 16;

$address = '東京都';

$req = 'http://maps.google.com/maps/api/geocode/xml';

$req .= '?address='.urlencode($address);

$req .= '&sensor=false';

$xml = simplexml_load_file($req) or die('XML parsing error');

if ($xml->status == 'OK') {

$location = $xml->result->geometry->location;

$lat = $location->lat;

$lng = $location->lng;

}

?>

<html>

<head>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript"></p> <p> function init() {</p> <p> var mapdiv = document.getElementById('map_canvas');</p> <p> var lat_input = document.getElementById('lat_input');</p> <p> var lng_input = document.getElementById('lng_input');</p> <p> var lat = <?php echo $lat;?>;</p> <p> var lng = <?php echo $lng;?>;</p> <p> var zoom = <?php echo $zoom;?>;</p> <p> var latlng = new google.maps.LatLng(lat, lng);</p> <p> var myOptions = {</p> <p> zoom: zoom,</p> <p> center: latlng,</p> <p> mapTypeId: google.maps.MapTypeId.ROADMAP,</p> <p> streetViewControl: true,</p> <p> };</p> <p> var map = new google.maps.Map(mapdiv, myOptions); </p> <p> var panoramaOptions = {</p> <p>  position: new google.maps.LatLng(latlng),</p> <p>  pov: {</p> <p>   heading: 180, //東西南北の向き。0なら北、180なら南向き</p> <p>   pitch: 10, //上下の角度(90なら真上、-90なら真下を見ている)</p> <p>   zoom: 1 //ズームの度合い(0は最も広角)</p> <p>  }</p> <p> };</p> <p> var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);</p> <p> map.setStreetView(panorama);</p> <p> }</p> <p></script>

</head>

<body onload="init()">

</body>

</html>

2011/05/15 15:30:50
id:Lhankor_Mhy No.4

Lhankor_Mhy回答回数775ベストアンサー獲得回数2302011/05/15 16:14:49

ポイント40pt

質問者様のご要望に合うかどうか不明ですが、住所から近いストリートビューを表示するように変えました。

 

http://jsfiddle.net/yfs9m/

↑PHPの変数とかは適宜当て込んでくださいね。

 

あと、

sv.getPanoramaByLocation(latlng, 200, processSVData);

の200は適当に調整して下さい。

id:ozaki

ご回答ありがとうございます。ロードマップ表示用のセンターと、ストリートビュー用のセンターを重ならないようにするということですね。

ただ、やってみたのですが、うまくいきません。http://www.withmama.info/s_map/hatena3.php (ソースもご高覧ください)

phpファイルでは以下のようにいたしました(ほとんどご教示いただいたもののコピペなのですが・・・)。

$zoom = 16;

$address = '東京都';

$req = 'http://maps.google.com/maps/api/geocode/xml';

$req .= '?address='.urlencode($address);

$req .= '&sensor=false';

$xml = simplexml_load_file($req) or die('XML parsing error');

if ($xml->status == 'OK') {

$location = $xml->result->geometry->location;

$lat = $location->lat;

$lng = $location->lng;

}

?>

<html>

<head>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript"></p> <p>var sv = new google.maps.StreetViewService();</p> <p>var mapdiv = document.getElementById('map_canvas');</p> <p>var lat_input = document.getElementById('lat_input');</p> <p>var lng_input = document.getElementById('lng_input');</p> <p>var lat = <?php echo $lat;?>;</p> <p>var lng = <?php echo $lng;?>;</p> <p>var zoom = <?php echo $zoom;?></p> <p>var latlng = new google.maps.LatLng(lat, lng);</p> <p>var myOptions = {</p> <p> zoom: zoom,</p> <p> center: latlng,</p> <p> mapTypeId: google.maps.MapTypeId.ROADMAP,</p> <p> streetViewControl: true,</p> <p>};</p> <p> var map = new google.maps.Map(mapdiv, myOptions); </p> <p>var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));</p> <p>sv.getPanoramaByLocation(latlng, 200, processSVData);</p> <p>function processSVData(data, status) {</p> <p> if (status == google.maps.StreetViewStatus.OK) {</p> <p> var markerPanoID = data.location.pano;</p> <p> panorama.setPano(markerPanoID);</p> <p> panorama.setPov({</p> <p> heading: 180,</p> <p> pitch: 10,</p> <p> zoom: 1</p> <p> });</p> <p> panorama.setVisible(true);</p> <p> }</p> <p>}</p> <p></script>

</head>

<body onload="init()">

</body>

</html>

☆もう少し、お付き合いいただけるとありがたいです。どうぞ、よろしくお願いいたします。

2011/05/15 16:51:25
id:asuka645 No.5

あすか回答回数856ベストアンサー獲得回数972011/05/15 18:49:34ここでベストアンサー

ポイント60pt

下記をお試しください。

<?php
$zoom = 16;
$address = '東京都';
$req = 'http://maps.google.com/maps/api/geocode/xml';
$req .= '?address='.urlencode($address);
$req .= '&sensor=false';
$xml = simplexml_load_file($req) or die('XML parsing error');
if ($xml->status == 'OK') {
    $location = $xml->result->geometry->location;
    $lat = $location->lat;
    $lng = $location->lng;
}
?>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init() {
    var sv = new google.maps.StreetViewService();
    var mapdiv = document.getElementById('map_canvas');
    var lat_input = document.getElementById('lat_input');
    var lng_input = document.getElementById('lng_input');
    var lat = <?php echo $lat;?>;
    var lng = <?php echo $lng;?>;
    var zoom = <?php echo $zoom;?>;
    var latlng = new google.maps.LatLng(lat, lng);
    var myOptions = {
        zoom: zoom,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: true,
    };
    var map = new google.maps.Map(mapdiv, myOptions);  
    var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
    sv.getPanoramaByLocation(latlng, 200, processSVData);

    function processSVData(data, status) {
        if (status == google.maps.StreetViewStatus.OK) {
            var markerPanoID = data.location.pano;
            panorama.setPano(markerPanoID);
            panorama.setPov({
                heading: 180, //東西南北の向き。0なら北、180なら南向き
                pitch: 10,    //上下の角度(90なら真上、-90なら真下を見ている)
                zoom: 1       //ズームの度合い(0は最も広角)
            });
            panorama.setVisible(true);
        }
    }
}
</script>
</head>
<body onload="init()">
<div id="map_canvas" style="width: 400px; height: 300px;"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>
id:ozaki

ありがとうございました。わざわざ、phpファイルに直していただいたんですね。たいへん助かりました。感謝です。

追伸。一番下にも発言させていただきましたが、皆さんから多くの情報をいただきましてたいへんありがとうございました。ただ、IEで見ると「不表示」となってしまいます。この件は別途質問を立てさせていただくつもりです。

ともあれ、本当にみなさんありがとうございました。

2011/05/15 19:37:36
  • id:Lhankor_Mhy
    あと蛇足ですが、
    <?php echo $lat;?>
    のようなコードは
    <?=$lat?>
    と書いた方が楽です。
  • id:ozaki
    あ、ありがとうございます。
  • id:Lhankor_Mhy
    回答4のレスに対してですが、
    function init(){
    ...
    }
    をお忘れです。
  • id:windofjuly
    うぃんど 2011/05/15 17:21:39
    >ロードマップ表示用のセンターと、ストリートビュー用のセンターを重ならないようにする
     
    回答1を繰り返します
    あなたが設定していたlatとlngだと
    ・ロードマップの表示はできる
    ・ストリートビューが通っていない地点のために表示できない
     
    回答2はlatとlngを別のものに替えてしまうというものですから
    ozakiさんが求めているものにはならないですが動作を確認するには必要なものでしょう
    ozakiさんはいきなりphpにしたりしてますが、基本のhtmlでの動作確認は行われたのでしょうか?
     
    回答3では、基本のhtmlでの確認ができたあとのステップアップであり、
    「ストリートビューが通っていない地点のために表示できない」という点を自動的に補正するようにしてくださってます
    何をやっているかといえば、「ロードマップで示されたlatとlngから半径200メートル以内で
    ストリートビューが使える地点を自動的に求めるようにしてくださった」のです
     
    重なる重ならないが原因ではなく、何が真の原因であったか、これで、ご理解いただけたのではないかと思います
     
    「残念です」と返答され、この先、どのように回答しようか考えているうちに
    他の方とのやりとりでほぼ解決に近づいたようで、それは何よりなのですが
    放置する回答者もいれば、回答を考え続けている回答者もいることを少し理解していただけると嬉しいです
  • id:Lhankor_Mhy
    windofjulyさん
    おっしゃることごもっともですが、せっかく日曜プログラマ入門中のようですし、慣れるまでは行間を汲み取ってお手伝い差し上げればいいのではないかと思いました。
    どうしても職業プログラマの方と比べて日曜プログラマは、ギークの作法に慣れていませんので大目に見て欲しいな、と同じ日曜プログラマとしては思うのです。
  • id:ozaki
    みなさんご教示ありがとうございました。皆さんからいただいた情報をいろいろ試行錯誤させていただきました。結果分かったことは、phpファイルの中にある「東京都」の部分が原因だったようです。これを「東京都西新宿2」として、皆さんからいただいた情報を取り込んで直しましたら、表示できました。http://www.withmama.info/s_map/hatena.php 

    本当に御礼申し上げます。

    追伸。ただ、IE(8)では表示されません。この件は別途質問を立てさせていただくつもりです。

    どうもありがとうございました。
  • id:Lhankor_Mhy
    Ω ΩΩ<な、なんだってー
     
     
     
    windofjulyさん
     
    僕が間違ってました。
    もっと言ってやって下さい。
  • id:Lhankor_Mhy
    ていうか、新たに質問立てる必要ないよ。
     
    streetViewControl: true,
     

     
    streetViewControl: true
     
    に。
    IEでは連想配列の最後の余分なカンマはエラーになるよ。webkitやGeckoではエラーにならないから知らないとハマりがち。気をつけよう。
     
     
     
    ていうか、途中で気付いてたよw

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません