いつもお世話になっています。
現在、googleのAPIを使ってストリートビューとマップを二つ出す方法が分からなくて悩んでおります。
具体的には、
1.縦300px、横400pxのグーグルマップが表示されている
2.グーグルマップからストリートビューボタンをクリックする
(もしくは、黄色い人形を設置する)
3.縦300px、横200pxのマップとストリートビューが並んで表示される
という感じのものを作りたいと考えております。
公式HPや、スクリプトを書かれているHPを見に行き、いろいろと試してみたのですが、どうにもできません。
作成したことがある方が居られましたら、教えていただきたいと思います。
よろしくおねがいいたします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
<<マップ一画面が表示されていて、ストリートビューに切り替えると、グー
グルマップとストリートビューの二つの画面に分かれる例>>
暇が出来たので、上記を作ってみました。ご参考にしてください。
※黄色い人型のアイコン画像もいくつか入手しました。
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>
No.1
- 回答日時:
そんなに難しくないと思いますが、どこができないのでしょう。
基本から理解しましょう!
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も入っています。
何か原因があるのでしょうか?
また、勉強不足を再認識しました。
勉強します。ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
バッチファイル 特定ウインドウ...
-
正規表現で、特定の文字列を含...
-
VBAでクイズゲームの作り方
-
入力フォームの値をQRコードで...
-
Ajax を Fetch API に 書き換え...
-
入力した文字をDBと照合させて...
-
お問い合わせはこちらというボ...
-
以下のURL入れますか?皆さんは↓
-
画像のドットの部分が抜けてい...
-
Chinapost こよパズルどう動か...
-
非同期通信で掲示板を作る際の...
-
非同期通信を使うタイミングが...
-
PYTHONのtkinterについて
-
Pythonのtkinterについて
-
Pythonを勉強する道のり
-
Pythonを無料(安価)で学ぶ方...
-
RPA(PowerAutomate)の実装について
-
ワードでA3横の画面にして、文...
-
課題なのですがどなたかコード...
-
自作の地図をグーグルマップの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
二つのbxsliderをレスポンシブ...
-
カンマ区切りのデータを配列に...
-
Googleマップのピンをクリック...
-
たくさんの経由地がある巡回ル...
-
googleマップが表示されない。
-
C言語の 配列の中 出力について
-
google maps api v3のルート検索
-
グーグルマップにマーカーを色...
-
how's whether today in yufuin?
-
Google maps api v3と印刷について
-
Javascriptを使ってQRコード読...
-
JavaScriptでtabindexの変更っ...
-
readyStateが4にならない原因
-
階層別の組織図の自動作成について
-
[jQuery UI] sortableを使いaja...
-
JavascriptからPHPへのAjax通信...
-
AjaxでJSONを受信すると、文字...
-
jQueryのblockUIをformのボタン...
-
.txtファイルの読み込み
-
SQLのmaxで求めた値を変数に代...
おすすめ情報