人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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)」の部分)。

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

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


●質問者: ozaki
●カテゴリ:インターネット ウェブ制作
✍キーワード:API Google Google Maps JavaScript POV
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● うぃんど
●20ポイント

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

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

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

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

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

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

◎質問者からの返答

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

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

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


2 ● あすか
●20ポイント

緯度・経度の値と、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>
◎質問者からの返答

ご教示ありがとうございました。ゴメンナサイ、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>


3 ● Lhankor_Mhy
●20ポイント

こんにちは。

ソース中の

var lng = 139.6917064;

var lng = 139.6911064;

にずらし、かつ

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

position: latlng,

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

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

◎質問者からの返答

ご教示ありがとうございました。ゴメンナサイ、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>


4 ● Lhankor_Mhy
●40ポイント

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

http://jsfiddle.net/yfs9m/

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

あと、

sv.getPanoramaByLocation(latlng, 200, processSVData);

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

◎質問者からの返答

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

ただ、やってみたのですが、うまくいきません。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>

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


5 ● あすか
●60ポイント ベストアンサー

下記をお試しください。

<?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>
◎質問者からの返答

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ