プロが教えるわが家の防犯対策術！

グーグルストリートビューについて

締切済

  • 質問者：maru_048
  • 質問日時：
  • 回答数：2件

いつもお世話になっています。

現在、googleのAPIを使ってストリートビューとマップを二つ出す方法が分からなくて悩んでおります。

具体的には、
１．縦300px、横400pxのグーグルマップが表示されている

２．グーグルマップからストリートビューボタンをクリックする
　　(もしくは、黄色い人形を設置する)

３．縦300px、横200pxのマップとストリートビューが並んで表示される

という感じのものを作りたいと考えております。

公式HPや、スクリプトを書かれているHPを見に行き、いろいろと試してみたのですが、どうにもできません。
作成したことがある方が居られましたら、教えていただきたいと思います。
よろしくおねがいいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2

  • 回答者： yyr446
  • 回答日時：

<<マップ一画面が表示されていて、ストリートビューに切り替えると、グー


グルマップとストリートビューの二つの画面に分かれる例>>
暇が出来たので、上記を作ってみました。ご参考にしてください。
※黄色い人型のアイコン画像もいくつか入手しました。
http://maps.gstatic.com/intl/en_ALL/mapfiles/cb/ …
からダウンロードして切り取って作りました。（本当は動的に切り取れるみたい）
※カスタムコントロール（GControl()）でストリートビュー制御用の
機能を作って、マップに追加し、黄色い人をクリックすれば、
マップとストリートビューに分かれて表示するようにしました。
もう一度クリックすると元に戻ります。この辺はDOMの操作でやってます。

＝＝＝＝＝＝＝サンプル確認＝＝＝＝＝＝＝＝＝＝＝
＝＝＝＝＝＝＝サンプルソース＝＝＝＝＝＝＝＝＝＝＝
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Google Street View</title>
<style type="text/css"></style>
<script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps?file=api&v=2&key=You …
<script type="text/javascript" charset="utf-8">
<!--
var map=null;
var stview=null;
var viewclient=null;
var SV_icon =null;
var panorama =null;

function StviewCtrl(){}
StviewCtrl.prototype = new GControl();
StviewCtrl.prototype.initialize = function(map){
var container = document.getElementById("StviewButton");
var btnDiv = document.getElementById("btn");
GEvent.addDomListener(btnDiv, "mouseover", function(){
btnDiv.setAttribute("src","/MAPICON/svicon1.png");
});
btn_mouseout_hnadle=GEvent.addDomListener(btnDiv, "mouseout", function(){
btnDiv.setAttribute("src","/MAPICON/svicon.png");
});
GEvent.addDomListener(btnDiv, "click", function(){
if(!stview){
btnDiv.setAttribute("src","/MAPICON/svicon0.png");
document.getElementById("map").style.width="500px";
document.getElementById("stview").style.display="block";
map.checkResize();
stview= new GStreetviewOverlay();
viewclient = new GStreetviewClient();
panorama = new GStreetviewPanorama(document.getElementById("stview"));
map.addOverlay(stview);
SV_icon = new GIcon();
SV_icon.image ="/MAPICON/svmarker.png";
SV_icon.iconSize = new GSize(22,46);
SV_icon.iconAnchor = new GPoint(11,46);
SV_icon.infoWindowAnchor = new GPoint(11,23);
var markeropts = {draggable:true,clickable:true,icon:SV_icon};
SV_marker = new GMarker(map.getCenter(),markeropts);
GEvent.addListener(SV_marker, "drag", function() {
SV_marker.setImage("/MAPICON/svwalk0.png");
});
GEvent.addListener(SV_marker, "dragend", function() {
SV_marker.setImage("/MAPICON/svmarker.png");
viewclient.getNearestPanoramaLatLng(SV_marker.getLatLng(),function(point){
if(point){
panorama.setLocationAndPOV(point);
map.panTo(point);
}
});
});
map.addOverlay(SV_marker);
panorama.setLocationAndPOV(map.getCenter());
map_move_hnadle=GEvent.addListener(map,"move",function(){
SV_marker.setPoint(map.getCenter());
viewclient.getNearestPanoramaLatLng(SV_marker.getLatLng(),function(point){
if(point){
panorama.setLocationAndPOV(point);
}
});
});
}else{
GEvent.removeListener(map_move_hnadle);
map.removeOverlay(SV_marker);
SV_icon = null;
map.removeOverlay(stview);
stview = null;
viewclient = null;
panorama = null;
document.getElementById("stview").style.display="none";
document.getElementById("map").style.width="800px";
map.checkResize();
btnDiv.setAttribute("src","/MAPICON/svicon.png");
}
});
map.getContainer().appendChild(container);
return container;
}
StviewCtrl.prototype.getDefaultPosition = function(){
return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(210, 2));
}

function Mapload() {
map = new GMap2(document.getElementById("map"),{size:new GSize(800,400)});
map.setCenter(new GLatLng(35.655, 139.744),18);
map.addControl(new GMapTypeControl());
map.setMapType(G_HYBRID_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl(),new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,15)));
map.addControl(new StviewCtrl());
}
// -->
</script>
</head>
<body onload="Mapload()" onunload="GUnload()">
<h2>Google Street Viewer</h2>
<div style="position:relative; width:810px; height:410px;">
<div id="map" style="position:absolute;top:0px;left:0px;width:800px;height:400px;border:1px solid black;"></div>
<div id="stview" style="position:absolute;top:0px;left:505px;width:300px;height:400px;border:1px solid black;display:none;"></div>
</div>
<div id="StviewButton">
<img id="btn" src="/MAPICON/svicon.png" />
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yyr446
  • 回答日時：

そんなに難しくないと思いますが、どこができないのでしょう。


基本から理解しましょう！
http://code.google.com/intl/ja/apis/maps/documen …
基本的なサンプルを作ってみました。
（黄色い人形のアイコンが無いのでデフォルトのマーカーを使ってます、
　アイコンを変える時はコメントアウトしている所で変えられます）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Google Street View</title>
<style type="text/css"></style>
<script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps?file=api&v=2&key=あなたのkey"></script>
<script type="text/javascript" charset="utf-8">
<!--
function Mapload() {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.655, 139.744), 18);
map.addControl(new GMapTypeControl());
map.addControl(new GSmallMapControl());
map.addControl(new GScaleControl(),new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,15)));
var viewclient = new GStreetviewClient();
var panorama = new GStreetviewPanorama(document.getElementById("street"));
var stview= new GStreetviewOverlay();
map.addOverlay(stview);
/*
var SV_icon = new GIcon();
SV_icon.image = "./MAPICON/yellowmarker.png";
SV_icon.iconSize = new GSize(20, 34);
SV_icon.iconAnchor = new GPoint(10, 34);
SV_icon.infoWindowAnchor = new GPoint(10, 2);
var markeropts = {draggable:true,clickable:true,icon:SV_icon};
*/
var markeropts = {draggable:true,clickable:true};
SV_marker = new GMarker(map.getCenter(),markeropts);
GEvent.addListener(SV_marker, "dragend", function() {
viewclient.getNearestPanoramaLatLng(SV_marker.getLatLng(),function(point){
if(point){
panorama.setLocationAndPOV(point);
map.panTo(point);
}
});
});
map.addOverlay(SV_marker);
panorama.setLocationAndPOV(map.getCenter());
}
// -->
</script>
</head>
<body onload="Mapload()" onunload="GUnload()">
<div style="position:relative; width:610px; height:310px;">
<div id="map" style="position:absolute;top:0px;left:0px;width:400px;height:300px;border:1px solid black;"></div>
<div id="street" style="position:absolute;top:0px;left:405px;width:200px;height:300px;border:1px solid black;"></div>
</div>
</body>
</html>

この回答への補足

早速回答のほうを頂き、ありがとうございます。
グーグルマップとストリートビューを同時に画面に出すのではなく、
もともと、マップ一画面が表示されていて、ストリートビューに切り替えると、グーグルマップとストリートビューの二つの画面に分かれる
という改良ができないのです。

オンマウスで、ディスプレイのnoneとblockを切り替えて表示まではできたのですが、切り替えるとマップを読み込まなくなってしまうのです。<body>タグにはonloadとonunloadも入っています。

何か原因があるのでしょうか？
また、勉強不足を再認識しました。
勉強します。ありがとうございます。

補足日時：2009/11/13 21:04
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報