サイドバー付きGoogle Mapについて

2023/09/04 13:51

このQ&Aのポイント

Google maps api v3の初心者がサイドバー付き地図を作成していますが、リンク先のURLを読み込むことができません。
手でリストを作っておいて、clickでリンクへ飛び、mouseover時に情報ウィンドウを表示することも可能です。
サイドバーにマーカ一覧を作り、クリックされるとマーカーを擬似クリックすることもできます。

ベストアンサー

サイドバー付きGoogle Mapについて

2013/01/16 08:45

初めまして～ Google maps api　v3　初心者です。どうかよろしくお願いいたします。 How to本でも紹介されているソースを元にサイドバー付き地図を作っています。サイドバーをclickからmouseoverに変更し mouseoverで情報ウィンドウを表示し clickで、リンクに飛ばそうとしています。が、サイドバーの<li>を作る過程でリンク先のURLを読み込むことができません。手でリストを作っておいて、 clickでリンクへ飛んで mouseover時に情報ウィンドウ表示でも構いません。どなたかお力添えをお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css">  </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var stationList = [ {"latlng":[43.40559401552279,141.4347595785141],name:"厚田公園",myStr:"http://www.hokudai.ac.jp/",myImg:""}, {"latlng":[43.40450276438633,141.43127270679474],name:"厚田公園キャンプ場"}, ] var infoWnd, mapCanvas; function initialize() { var mapDiv = document.getElementById("map_canvas"); mapCanvas = new google.maps.Map(mapDiv); mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP); infoWnd = new google.maps.InfoWindow(); //■地図上にマーカーを配置していく var bounds = new google.maps.LatLngBounds(); var station, i, latlng; for (i in stationList) { //■マーカーを作成 station = stationList[i]; latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1]); bounds.extend(latlng); var marker = createMarker( mapCanvas, latlng, station.name,station.myStr,station.myImg ); //■サイドバーのボタンを作成 createMarkerButton(marker); } //■マーカーが全て収まるように地図の中心とズームを調整して表示 mapCanvas.fitBounds(bounds); } function createMarker(map, latlng, title,myStr,myImg) { //■マーカーを作成 var marker = new google.maps.Marker({ position : latlng, map : map, title : title, 　　content:myStr, content:myImg }); //■マーカーがクリックされたら、情報ウィンドウを表示 google.maps.event.addListener(marker, "click", function(){ infoWnd.setContent('<div id="myInfo"><span>' + title + "</span><br><a href="+myStr+ ">"+"<img src="+myImg+"><br>"+"詳細を開く</a>"+ "</title></div>"); infoWnd.open(map, marker); }); return marker; } function createMarkerButton(marker) { //■サイドバーにマーカ一覧を作る var ul = document.getElementById("marker_list"); var li = document.createElement("li"); var title = marker.getTitle(); li.innerHTML = title; ul.appendChild(li); //■サイドバーがクリックされたら、マーカーを擬似クリック ★clickをmouseoverに改変 google.maps.event.addDomListener(li, "mouseover", function(){ google.maps.event.trigger(marker, "click"); }); } google.maps.event.addDomListener(window, "load", initialize); </script> <style type="text/css">  </style> </head> <body> <DIV align="center"> <TABLE> <TR> <TD width="600" valign="top"> <DIV id="map_canvas" style="width:600px; height:400px;float: left" align="left"></DIV> </TD> <TD width="250" valign="top" align="left"> <ul id="marker_list" style="width:250px;float: right; font-size:13px;"></ul> </TD> </TR> </TABLE> </DIV> </body> </html>

kiyo4rou
お礼率50% (2/4)

その他（プログラミング・開発）
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2013/02/01 12:56 回答No.3

ANo2です。補足が付いたのを気付きませんでした。＞「理屈」を教えていただくのではなくてソースをご教授いただけないでしょうかとのことなので。（変数名は変えています） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css">  </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize(map, list){ function createMarker(marker){ var mark = new google.maps.Marker(marker); mark.setMap(mapCanvas); google.maps.event.addListener(mark, "click", function(){showInfo(marker);}); } function createSideList(marker){ var li = document.createElement("li"); var anchor = document.createElement("a"); anchor.href = marker.href; anchor.appendChild(document.createTextNode(marker.title)); li.appendChild(anchor); markerList.appendChild(li); google.maps.event.addDomListener(li, "mouseover", function(){showInfo(marker);}); } function showInfo(marker){ infoWnd.setOptions(marker); infoWnd.open(mapCanvas); } var markerData = [ {lat:43.4056, lng:141.4348, title:"厚田公園", href:"http://www.hokudai.ac.jp/", img:"A.jpg"}, {lat:43.4045, lng:141.4313, title:"厚田公園キャンプ場", href:"http://www.google.co.jp/", img:"B.jpg"} ]; var mapCanvas = new google.maps.Map(document.getElementById(map)); mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP); var bounds = new google.maps.LatLngBounds(); var infoWnd = new google.maps.InfoWindow(); var markerList = document.getElementById(list); for(var i=0, marker; marker=markerData[i++];){ marker.position = new google.maps.LatLng(marker.lat, marker.lng); bounds.extend(marker.position); var content = '<div id="infoWindow"><span>' + marker.title + '<' + '/span><br>'; content += '<a href="' + marker.href + '"><img src="' + marker.img + '"><br>'; content += '詳細を開く<' + '/a><' + '/div>'; marker.content = content; createMarker(marker); createSideList(marker); } mapCanvas.fitBounds(bounds); } google.maps.event.addDomListener(window, "load", function(){ initialize("map_canvas", "marker_list") }); </script> </head> <body> <div id="map_box" > <div id="map_canvas" align="left"></div> <ul id="marker_list"></ul> </div> </body> </html>

質問者

お礼 2013/02/01 22:54

ありがとうございます。想定通りに動いています。虫がよすぎた・・・と他力本願を諦めて 4000円もする本を買い込んで、一人で悩んでいたところに救いの手を差し伸べていただいて、本当に感謝しています。 scriptの部分は跡形も無かったので付け焼刃の知識で切った貼った程度ではなんともならないことに取り組んでいたんだと思い知らされました。出来る人が、羨ましい限りです。 li要素をjqueryで動かせるか試してみてうまくいけば、理想のゴール。そうでなくても、ほぼ理想に近いものが出来そうです。重ね重ね、ありがとうございました。

その他の回答 (2)

fujillin
ベストアンサー率61% (1594/2576)

2013/01/18 09:25 回答No.2

構成が私には読取り難いので、間違っているかもしれませんが… サイドバー作成時に<li>と同様に、<a>要素を作成し入れ子にしてあげればよいのではないでしょういか。＞が、サイドバーの<li>を作る過程で＞リンク先のURLを読み込むことができません。わざわざ引数をマップ内のmarkerにしていますが、元データのstationList[i]にするとか、そのインデックスの i だけを渡すとかで問題は解決すると思いますが… （title用のデータは元データにもあるので。　なぜ変数名がstationなのかのほうが、私には謎ですが）

質問者

補足 2013/01/20 01:00

ありがとうございます。変数名は、ネットで拾ってきたままです。おそらく大元は、勝俣氏の本に記載されているかと思います。テーブル構造を簡略化し、配列を内部に取り込んで myStr,myImg を追加。情報ウィンドウの内容を書き換えて CSSを追加・・・あとはチョコチョコといじっています。 <a>タグの埋め込みはできています。問題は、リンク先としてmyStrを引っ張ってくるところでして、 getContent では、ダメでした。「理屈」を教えていただくのではなくて、ソースをご教授いただけないでしょうか。何卒よろしくお願いいたします。

wf9a5m75
ベストアンサー率92% (13/14)

2013/01/17 07:28 回答No.1

このあたりが参考になりませんか？ ■サイドバー付きの地図を作る 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

質問者

補足 2013/01/17 08:32

ありがとうございます。挙げていただいた3つのページの内、上2つは、チェック済みでして 3つ目も、面白い内容ですが私の求めているものではありません。サイドバーの<li>要素がscriptによって自動生成されます。この過程で、<a>タグを付けたいんですよ。これによって、サイドバーの項目に対して (1)mouseover時に、地図上で情報ウィンドウが開く (2)click時に、リンクが開くようにしたいのです。情報ウィンドウ内に、画像とリンクを表示させるようには出来ましたが、同じようにサイドバーにもリンクを作りたいのです。引き続き、アドバイスをお待ちしております。

関連する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">  </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&region=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">  </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">  </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

サイドバー付きGoogle Mapについて

サイドバー付きGoogle Mapについて