- ベストアンサー
サイドバー付きGoogle Mapについて
wf9a5m75の回答
- wf9a5m75
- ベストアンサー率92% (13/14)
このあたりが参考になりませんか？ ■サイドバー付きの地図を作る http://googlemaps.googlermania.com/google_maps_api_v3/ja/map_example_sidebar.html ■サイドバー + カテゴリ分け http://googlemaps.googlermania.com/google_maps_api_v3/ja/map_example_sidebar2.html ■FusionTablesLayerで使えるサイドバー http://googlemaps.googlermania.com/google_maps_api_v3/ja/fusion-tables-sidebar.html
関連するQ&A
- google map吹き出し
下記google mapをスマホで見ると吹き出しが頻繁に出たり消えたりして見づらいのですが 吹き出しは出しっぱなしでカウントダウンのみ動かす方法ありませんか。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div#map-canvas { position: absolute; width: 100%; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var geocoder, map, marker, infoWindow; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.710058, 139.810718); var mapDiv = document.getElementById('map-canvas'); var myOptions = { center: latlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapDiv, myOptions); google.maps.event.addListener(map, 'click', function(e) { marker = new google.maps.Marker({ position: e.latLng, map: map, draggable: true, title: "Click Me!" }); if(infoWindow) infoWindow.close(); infoWindow = new google.maps.InfoWindow(); var targetDate = Date.parse('2014/07/07 00:00:00'); setInterval ( function() { var now = new Date().getTime(); var diff = targetDate - now; var day = Math.floor ( diff / 86400000 ); diff -= day * 86400000; var hour = Math.floor ( diff / 3600000 ); diff -= hour * 3600000; var minute = Math.floor ( diff / 60000 ); diff -= minute * 60000; var second = Math.floor ( diff / 1000 ); if(infoWindow) infoWindow.setContent ( '七夕まで' + day + '日' + hour + '時間' + minute + '分' + second + '秒' ); },1000); infoWindow.open(map, marker); map.setCenter(e.latLng); }); }; google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
- ベストアンサー
- AJAX
- Google Map （外部から情報ウィンドウ開く
Google Maps API v3 において「地図外のHTMLから地図内の情報ウィンドウを開く」ということをやろうとしているのですが、どうにもうまくいきません。 下記コードにおいて、地図外にある「あいうえお商店」や「かきくけこ不動産」をクリックした際、地図内に情報ウィンドウが開くようにするためにはどのようにすればよいでしょうか。 すでに丸3日間悩んでおり、私の力ではどうにもならないと判断したため、皆さまのお力をお借りすることにしました。大変恐れ入りますが、貧弱な知識の私にどうか知恵を与えてやって下さい。どうぞよろしくお願い致します。 深みにはまって抜け出せないコードは以下の通りです。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶 function initialize() { var latlng = new google.maps.LatLng(35.67105, 139.743624); var opts = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); // ***************１件目のデータ*************** var m_latlng1 = new google.maps.LatLng(35.675224, 139.737914); var marker1 = new google.maps.Marker({position: m_latlng1,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|3CFFF8|000000',title: '港区赤坂3-3-3' }); var contentString1= '</p>あいうえお商店</p></div>'; var infowindow1 = new google.maps.InfoWindow({content: contentString1 }); // ***************１件目のデータ*************** // ***************２件目のデータ*************** var m_latlng2 = new google.maps.LatLng(35.670772, 139.733875); var marker2 = new google.maps.Marker({position: m_latlng2,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|3CFFF8|000000',title: '港区赤坂5-5-5' }); var contentString2= '</p>かきくけこ不動産</p></div>'; var infowindow2 = new google.maps.InfoWindow({content: contentString2 }); // ***************２件目のデータ*************** google.maps.event.addListener(marker1 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow1.open(map,marker1); currentInfoWindow = infowindow1; }); google.maps.event.addListener(marker2 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow2.open(map,marker2); currentInfoWindow = infowindow2; }); } function myclick(idx) { google.maps.event.trigger(marker[idx],'click'); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 700px; height: 500px"></div> 1 <a href="javascript:myclick(0)">あいうえお商店</a></p> 2 <a href="javascript:myclick(1)">かきくけこ不動産</a></p> </body> </html> ---------------------------------------------------------------- 大変恐れ入りますが、どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- グーグルマップのサイズが変更できない
ここでの質問じゃなかったらすみません； 以下のようにグーグルマップを使用しています。 google.load('maps', '3.0', {other_params: 'sensor=false'}); google.load('jquery', '1.3.2'); google.setOnLoadCallback(function() { jQuery(document).ready(function($) { var latlng = new google.maps.LatLng(35.658632, 139.745411); var options = { zoom: 2, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map($('#mapCanvas').get(0), options); 略 }); }); これで普通にマップが表示されるのですが #mapCanvas { width: 100%; height: 300px; border: 1px solid #cecece; margin: 0; padding: 0;} このCSSでheightを100%にすると、マップが線のようになってしまいます。 横は自動でサイズ変更されるのですが、縦だけ300pxのように指定しないと画面が 見れません。 本家グーグルマップのように画面全体に表示したいのですが、どうすればよいので しょうか、どなたかご教示願います。
- ベストアンサー
- AJAX
- IE6でグーグルマップが表示できない問題です。
以下のようなGoogleマップのScriptを教えてもらい、使用しています。 地図に2個の円とオリジナルのマーカーを立てるものです。 ■症状： ・IE7/Firefoxでは、完全に表示されます。 ・IE6では、地図の描画を始めますが、画面がすぐ黒なってしまいます。 ・下記のScriptの透過度 （ fillOpacity: 0.1, など）に関する部分を削除したところ、 IE6で地図とマーカーは表示されましたが、円弧が表示されません。 ■対策したい点： 半透明の上品さは捨てても、IE6で地図の機能として円弧のラインを表示させたいと思います。 ------------------------------------------------------------------------------- 教えてください。お願いします。 JavaScriptに関しては、あまり知識がありません。 判りやすくお願いします。 使っているJavaScript ------------------------------------------------------------------------------- <head> 内、最後部： <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> <body> 部： <div id="xx_map" style="width:620px; height:500px;margin:0px auto;" align="center"></div> <script type="text/javascript"> <!-- var myLatLng = new google.maps.LatLng(35.yyy,139.zzz); //地図を表示 var myMap = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scrollwheel: false }); //円を2個表示 new google.maps.Circle({ center: myLatLng, // 中心点(google.maps.LatLng) fillColor: '#ff0000', // 塗りつぶし色 fillOpacity: 0.1, // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明） map: myMap, // 表示させる地図（google.maps.Map） radius: 5000, // 半径（ｍ） strokeColor: '#ff0000', // 外周色 strokeOpacity: 0.6, // 外周透過度（0: 透明 ⇔ 1:不透明） strokeWeight:2 // 外周太さ（ピクセル） }); new google.maps.Circle({ center: myLatLng, // 中心点(google.maps.LatLng) fillColor: '#0000ff', // 塗りつぶし色 fillOpacity: 0.07, // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明） map: myMap, // 表示させる地図（google.maps.Map） radius: 10000, // 半径（ｍ） strokeColor: '#0000ff', // 外周色 strokeOpacity: 0.6, // 外周透過度（0: 透明 ⇔ 1:不透明） strokeWeight:2 // 外周太さ（ピクセル） }); //マーカーを表示 var markerImage = 'marker_aa.gif'; var marker = new google.maps.Marker({ position: myLatLng, map: myMap, icon: markerImage }); //--> </script> ----------------------------------------------------------------------------- 以上、JavaScript記述終わり。
- ベストアンサー
- JavaScript
- 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> ///////////////////////////////////////////////
- ベストアンサー
- JavaScript
- グーグルマップ v3で複数の住所からピンを立てたい
現在、googlemap v3で複数の住所からそれぞれのピンを立てたいと 考えております。 下記コードにて実行しましたが、住所とウィンドーの中身が ずれて表示されてしまい困っております。 例）東京にピンが立っているがウィンドーの中身が広島など どなたかご教授ください。 よろしくお願いいたします。 -----js------ var data = new Array(); data.push({position:'東京都',content:'東京都'}); data.push({position:'広島県',content:'<strong>広島県</strong><p>aaaaaaaaaa</p>'}); data.push({position:'沖縄',content:'<strong>沖縄</strong><p>aaaaaaaaaa</p>'}); data.push({position:'北海道',content:'<strong>北海道</strong><p>aaaaaaaaaa</p>'}); var geocoder = new google.maps.Geocoder(),icon = ''; function gmap(address,path){ icon = path; geocoder.geocode({'address':address}, function(result,status){ if(status == google.maps.GeocoderStatus.OK){ var latlng = result[0].geometry.location; var mapdiv = document.getElementById('map'); var myOptions = { zoom:10, center:new google.maps.LatLng(latlng.lat(),latlng.lng()), mapTypeId:google.maps.MapTypeId.ROADMAP, scaleControl:true, mapTypeControl:true }; var map = new google.maps.Map(mapdiv,myOptions); moreGmap(map); } }); } var j = 0; function moreGmap(map){ var image = new google.maps.MarkerImage(icon,new google.maps.Size(32,50),new google.maps.Point(0,0),new google.maps.Point(16,50)); for(var i in data){ geocoder.geocode({'address':data[i].position},function(result,status){ if(status == google.maps.GeocoderStatus.OK){ var latlng = result[0].geometry.location; var addlatlng = new google.maps.LatLng(latlng.lat(),latlng.lng()); var marker = new google.maps.Marker({ position:addlatlng, map:map, icon:image, title:data[j].position }); var cont = data[j].content; var infoWin = new google.maps.InfoWindow({ content:cont, size:new google.maps.Size(50,50) }); infoWin.open(map,marker); google.maps.event.addListener(marker,'click',function(){ infoWin.open(map,marker); }); j++; } }); } j = 0; }
- 締切済み
- JavaScript
- google mapに複数マーカーを設置する関数
google mapに複数のマーカーとそれに伴う吹き出しを作成しています。 マーカーの数は上下するのですが、大体30～40個くらいが設置される予定です。 ただできるだけjsのソースを少なくしたいと思っているため、ループでまとめて記述できないかと試行錯誤しています。 ちなみに現状は以下のように記述しています。 * * * * * * * * * * * * * * * * * * * * * * * * * var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(座標), map: map, title: 'マーカー2' }); var contentString2 = '吹き出しテキスト'; var infowindow2 = new google.maps.InfoWindow({ position: new google.maps.LatLng(座標), content: contentString2 }); google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map,marker2); }); * * * * * * * * * * * * * * * * * * * * * * * * * この「2」の部分を各数字に変えてマーカー分記述していたのですが、 面倒で尚且つソースが非常に多くなるため困っています。 for関数でループさせてみようと思い作成してみたのですが、うまく動作しません。 ちなみに吹き出し内のコメントはすべて違う内容になるため、せめてgoogle.maps.event.addListenerの部分だけでも、と思っています。 javascriptは初心者で、上記のソースも色々調べた上で見よう見まねで作っています。 どなたか効率のよい方法を教えていただけますでしょうか。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- Google マップにマーカーと同心円を入れたい
2回目の質問です。前回の掲載期間で、解決できなかったため。 超初心者的質問ですが、教えてください。 Google マップのある地点を中心に、 マーカーと1km/5km/10kmなどの同心円（半透明で外側ライン）の2種を表示をしようとしています。 おのおの単独で表示することは、例がありわかりましたが、 その2つを同時に表示するために、scriptを変更するのがわかりません。 1. マーカーを表示するscript <script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //地図を作成 var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng( 緯度 , 経度 ), 地図サイズ ); //マーカーを追加(国会議事堂) var marker = new GMarker(new GLatLng( 緯度 , 経度 )); map.addOverlay(marker); } } //]]> </script> 2. 同心円を表示するscript <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> <div id='map' style='width:700px; height:400px;'><br /></div> <script type="text/javascript"> var myLatLng = new google.maps.LatLng( 緯度 , 経度 ); var myMap = new google.maps.Map(document.getElementById('map'), { zoom: 地図サイズ, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scrollwheel: false }); new google.maps.Circle({ center: myLatLng, // 中心点(google.maps.LatLng) fillColor: '#ff0000', // 塗りつぶし色 fillOpacity: 0.5, // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明） map: myMap, // 表示させる地図（google.maps.Map） radius: 95330, // 半径（ｍ） strokeColor: '#ff0000', // 外周色 strokeOpacity: 1, // 外周透過度（0: 透明 ⇔ 1:不透明） strokeWeight: 1 // 外周太さ（ピクセル） }); </script> この2ヶのscriptをどのようにつなげば、解決できるか教えてください。 JavaScriptの基本知識不足のため、書いていただければ助かります。
- ベストアンサー
- JavaScript
- google map api プログラミング
javascript google map api どなたか助けてください マップを作成しているのですが、どうしてもわからないところがあります。 下のソースコードの中にテーブルがあるのですが、そこに、検索を押したときの マーカーの場所の詳細を表示させたいのですがどうやっても表示できません。 どなたかプログラミングにお詳しい方教えてください！ よろしくお願いします。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8n"/> <title>練習</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false®ion=jp"></script> <script language="JavaScript" src="gcode_com.js"></script> <script language="JavaScript" src="gcode.js"></script> <script language="JavaScript" src="GoogleMapsCustomMapType.js"></script> <!link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script> <script type="text/javascript"> <!-- var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(36.370324,138.65968); var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, scaleControl: true } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function codeAddress() { var address = document.getElementById("address").value; // var zm = document.getElementById("zm").value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); // document.write( alert ( zoom ) ); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } // --> </script> </head> <body onload="initialize()" background=""> <center> <font size=5>練習</font> <div id="map_canvas" style="width: 1000px; height: 600px; border: 1px solid Gray;"></div> </center> <div> キーワード: <input id="address" type="textbox" size="30" value="ここにキーワードを入力してください"> <!input id="zm" type="textbox" size=2 value="8n"> <input type="button" value="検索" onclick="codeAddress()"> </div> <table width="400" height="200" border="1" align="left"> <tr> <td width="150" height="50">緯度</td> <td width="150" height="50">経度</td> <td width="800" height="50">住所</td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> </table> </body> </html>
- 締切済み
- JavaScript
- 非常に困ってます。Google mapsの作成
およびスタイルシートの活用 メモ帳にて 以下のソースコードにて試したのですがIEで右側しか表示されないで困ってます。多少いじってます。 このソースコードでmapを表示できるよう指摘をお願いします。 とても長いですが自力ではもう分からなくて手つかずです。 <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>１マップ</title> <style type="text/css"> <!-- h2 { text-align:left; font-size:25px } p { margin-top:0px; text-align:justify; text-justify:distribute; line-height:15pt; font-size:16px; color:black } .text1div { border-style:solid; border-width:4px; border-color:#ffffff; padding:3px; width:330px; height:325px; border:solid 0px; overflow:auto; background-color:white darkblue darkblue white; scrollbar-base-color: #ffffff; scrollbar-highlight-color:#009999; position:absolute; left:410px; top:70px } P.text1 { text-align:justify; text-justify:distribute; line-height:120%; font-size:15px } --> </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></scr ipt> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(座標); var opts = { zoom: 13, center: latlng, scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var marker = new google.maps.Marker({position: latlng,map: map }); var infowindow = new google.maps.InfoWindow({content:'＊＊＊＊＊',position: latlng }); infowindow.open(map); </script> </head> <body onload="initialize()"> <h2>My Maps</h2> <div id="map_canvas" style="width:400px; height:300px"></div> <DIV CLASS="text1div"><P CLASS="text1"> マップです。<BR> ＊＊市＊＊区＊条＊＊丁目＊番＊号<BR> Tel ＊＊＊-＊＊＊-＊＊＊<BR><BR> <DIV> <DIV align="center"> <form><input type="button" name="OK" value=" Close " onClick="window.close()"></form> </DIV> </body> </html>
- 締切済み
- CSS
補足
ありがとうございます。 挙げていただいた3つのページの内、上2つは、チェック済みでして 3つ目も、面白い内容ですが私の求めているものではありません。 サイドバーの<li>要素がscriptによって自動生成されます。 この過程で、<a>タグを付けたいんですよ。 これによって、サイドバーの項目に対して (1)mouseover時に、地図上で情報ウィンドウが開く (2)click時に、リンクが開く ようにしたいのです。 情報ウィンドウ内に、画像とリンクを表示させるようには 出来ましたが、同じようにサイドバーにもリンクを作りたいのです。 引き続き、アドバイスをお待ちしております。