• 締切済み

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

いつもお世話になっています。 現在、googleのAPIを使ってストリートビューとマップを二つ出す方法が分からなくて悩んでおります。 具体的には、 １．縦300px、横400pxのグーグルマップが表示されている ２．グーグルマップからストリートビューボタンをクリックする 　　(もしくは、黄色い人形を設置する) ３．縦300px、横200pxのマップとストリートビューが並んで表示される という感じのものを作りたいと考えております。 公式HPや、スクリプトを書かれているHPを見に行き、いろいろと試してみたのですが、どうにもできません。 作成したことがある方が居られましたら、教えていただきたいと思います。 よろしくおねがいいたします。

  • AJAX
  • 回答数2
  • ありがとう数15

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

<<マップ一画面が表示されていて、ストリートビューに切り替えると、グー グルマップとストリートビューの二つの画面に分かれる例>> 暇が出来たので、上記を作ってみました。ご参考にしてください。 ※黄色い人型のアイコン画像もいくつか入手しました。 http://maps.gstatic.com/intl/en_ALL/mapfiles/cb/mod_cb_scout/cb_scout_sprite_003.png からダウンロードして切り取って作りました。（本当は動的に切り取れるみたい） ※カスタムコントロール（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=YourKey"></script> <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>

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

そんなに難しくないと思いますが、どこができないのでしょう。 基本から理解しましょう！ http://code.google.com/intl/ja/apis/maps/documentation/introduction.html 基本的なサンプルを作ってみました。 （黄色い人形のアイコンが無いのでデフォルトのマーカーを使ってます、 　アイコンを変える時はコメントアウトしている所で変えられます） <!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>

maru_048
質問者

補足

早速回答のほうを頂き、ありがとうございます。 グーグルマップとストリートビューを同時に画面に出すのではなく、 もともと、マップ一画面が表示されていて、ストリートビューに切り替えると、グーグルマップとストリートビューの二つの画面に分かれる という改良ができないのです。 オンマウスで、ディスプレイのnoneとblockを切り替えて表示まではできたのですが、切り替えるとマップを読み込まなくなってしまうのです。<body>タグにはonloadとonunloadも入っています。 何か原因があるのでしょうか？ また、勉強不足を再認識しました。 勉強します。ありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. AJAX

関連するQ&A

  • GoogleMapsAPIのストリートビュー

    GoogleMapsAPIでマーカーをストリートビューで表示させたい GoogleMapsAPIでマーカーを追加し移動もできるようにしましたが、 このマーカーのストリートビューを別窓で表示させる方法を教えていただけないでしょうか マーカーは人型のアイコンではなく、追加したマーカーです よろしくお願いします 以下、ソースです /////////////////////////////////////////////// <script type="text/javascript"> function initialize() { var map = new google.maps.Map( document.getElementById("gMap"),{ zoom : 16, center : new google.maps.LatLng(35.688272,139.696459), mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl : true } ); var marker = new google.maps.Marker({ position: new google.maps.LatLng(35.688272,139.696459), map: map, draggable : true }); } </script> <style> #gMap{ width: 900px; height: 500px; } #View{ width: 900px; height: 300px; border: 1px solid #000; /* この枠線内にストリートビューを表示させたい */ } </style> </head> <body onload="initialize()"> <div id="gMap"></div> <div id="View"></div> </body> ///////////////////////////////////////////////

  • グーグルストリートビューのバグ

    グーグルマップでストリートビューを表示し道路を進んでいたら 前方に進めず横にしか進めなくなったのですが、こういうの普通にたくさんある バグなんですか？

  • iPadでストリートビューを見るには？

    地図が悪いと聞いて控えていたiOS６ですが、 改良されたそうなのでインストールしたところ、 標準のマップではストリートビューが見れなくなりました。 googleマップのアプリを入れようとしても見つかりません。 ブラウザでグーグルマップを見ることはできますが、人型のアイコンは表示されてません。 何か良い方法はありますか？ よろしくお願いします。

    • ベストアンサー
    • Mac
  • googleのマップストリートビューが使えません。

    googleのマップストリートビューが使えません。 つい先日までよく利用していたのですが 昨日から突然、そのサイトページにいって「googlのマップストリートビューを使ってみる」というボタンをクリックしたら、 URLと共に［インターネットの操作を中断しました］というメッセージがでてきます。 原因がわかりません。 どうしたら良いのでしょうか？

  • Googleストリートビューの写真を切り替えるスクリプトがIE6だけ動作しない原因を知りたいです。

    Googleストリートビューを使って、 テキストリンクで写真を切り替えるページを作りました。 ソースは下記に記述したものです。 こちらをブラウザで確認したところ FirefoxやIE7では問題なく動作しましたが、 IE6だけマップは移動するものの、 ストリートビューが移動しませんでした。 <html> <head> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[APIキー]" type="text/javascript"></script> </head> <body onload="load()"> <div id="street" style="width:320px;height:200px"></div> <div id="map" style="width:320px;height:200px"></div> <ol> <li><a href="#" onClick="map01();return false">地図1を表示</a></li> <li><a href="#" onClick="map02();return false">地図2を表示</a></li> </ol> <script type="text/javascript"> //<![CDATA[ function load() { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.655, 139.744), 18); panorama = new GStreetviewPanorama(document.getElementById("street")); } // 地図1 function map01() { var point = new GLatLng(35.655, 139.744); map.panTo(point); panorama.setLocationAndPOV(point); } // 地図2 function map02() { var point = new GLatLng(35.657, 139.751); map.panTo(point); panorama.setLocationAndPOV(point); } //]]> </script> </body> </html> 以上のソースになります。 原因がお分かりになる方いらっしゃいますでしょうか。 ちなみに、ストリートビューの画面がローカル環境で動かないため、 APIキーを取得したWebページでしか確認できないかもしれません。。 お手数になってしまいますが、よろしくお願いします。

    • ベストアンサー
    • AJAX
  • グーグルマップのストリートビューが使いにくい

    グーグルマップのルート検索やストリートビューが以前のに比べたら使いにくくなりました。 以前の青い表示もなくなり、ストリートビューだとどの辺をみているのかがわかりません。以前のに戻して欲しいと思っていますけど、グーグルのどこかにお問い合わせと項目がどこにあるのか教えて下さい。皆さんの回答を待っています。

  • グーグルのストリートビューの使い方で困っています。

    グーグルのストリートビューの使い方で困っています。 黄色い人形のアイコンをドラッグして地図上にもっていくのですが、そのあとの人形の向きが思うように変える事ができません。どのように操作すればよいのでしょうか。よろしくお願いいたします。

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

    XPERIAarcでグーグルストリートビューを見ています。 初心者でわからないので、わかりやすく教えていただけると有り難いです。 (1)ストリートビューにはマップとブラウザ2つありますが、違いを教えて下さい。 (2)とりあえずよくわからなかったですがマップの方で自分や実家の住所を検索してみましたが… ピグマン？とかゆぅ人のマークが出てくる時と出てこなぃ住所があるみたいですが、どうしてか教えて下さい、お願いします(^-^)

  • 【Googleマップ】ストリートビューについて、で

    Googleマップのストリートビューについての質問です。 ストリートビューの画像にない建物があるの理由は何なのでしょうか？ 詳しい方、お願い致します。

  • googleマップのストリートビューが使えなくなりました。

    こんにちは。よろしくおねがいします。 googleのストリートビューが使えなくなりました。 以前は、マップ上の青い道路を選んで、利用できたと思います。 ストリートビューに入る手順を教えてください。 (win-vista)

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する