フォーム内でGoogleマップAPIの表示がずれる原因と解決方法
- フォーム内でGoogleマップAPIの表示がずれる問題について質問します。
- マップの表示はできるのですが、マップの中の表示がずれる現象が発生しています。
- 問題の原因として、<div>タグの配置やCSSの制御がうまくいっていない可能性があります。解決方法としては、CSSを調整するか、<div>タグの配置を見直すことが考えられます。
- ベストアンサー
フォームの中でgoogleマップAPIの表示がずれてしまいます。教えてください
フォームの中でgoogleマップAPIの表示がずれてしまいます。教えてください こんにちは、よろしくお願いします <HEAD> <script src="http://maps.google.com/maps?file=api&v=2&key=googleマップキー" type="text/javascript" charset="utf-8"></script> </HEAD> <FORM> <div id="default-open"> <a href="javascript:;" onclick="document.getElementById('default-close').style.display='block'; document.getElementById('default-open').style.display='none';"> オプションを追加する</a> </div> <div id="default-close" style="display: none;"> <a href="javascript:;" onclick="document.getElementById('default-open').style.display='block'; document.getElementById('default-close').style.display='none';"> 閉じる</a><br> <div id="map" style="width:300px; height:300px; margin-left: 0px; margin-top:0px;"> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(36.033333, 139.15), 8); } //]]> </script> </div> </FORM> 「オプションを追加する」をクリックしたら、javascriptで下側にgoogleマップAPIが現れるといったコンテンツを作っています マップの表示はできるのですが、中のマップの表示がどうしてもずれたような感じになってしまいます 灰色の帯のようなものがマップの周囲に出てきて、きちんと読み込まれて無いように見えます <div id="default-close">の外側に出すときちんと表示できるので、CSSで制御できないかと頑張ってみましたがうまくできません 上側の<div>タグで細工したのがずれる原因ではないかと思うのですが・・・ 誰かこの問題について分かる方はいないでしょうか
- t_getsuei
- お礼率77% (7/9)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
var map = new GMap2(document.getElementById("map"), {size:new GSize(300,300)}); でだめですか？
関連するQ&A
- Google AJAX API のmapsのロードとＩＥでの表示について
いつもお世話になっています。 Google AJAX APIについて質問です。 デベッロッパーガイドに従って以下のようにスクリプトを書いたのですが IEのみエラーが出て表示されません。 (IE7でも表示はされましたが、不安定でした） <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi?key=登録したAPIキー"></script> <script type="text/javascript"> google.load("maps", "2"); function initialize() { var map = new google.maps.Map2(document.getElementById("map")); map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); } google.setOnLoadCallback(initialize); </script> </head> <body> <div id="map" style="width: 400px; height: 400px"></div> <div id="searchcontrol"></div> </body> </html> なぜIEだけが表示されないのか、エラーが出るのかわかる方いらっしゃいましたらよろしくお願いします。
- 締切済み
- JavaScript
- GoogleMapAPI V3 にて、マップの表示がずれてしまいます。
GoogleMapAPI V3 にて、マップの表示がずれてしまいます。 Google Map を表示させるタブをクリックすることで、 下記ソースの「id="gmap"」の箇所を display :block で表示させるようにしているのですが、 その際に、マップの表示がくずれてしまいます。 （もちろん「id="gmap"」を初期表示としていた場合はくずれません） V2では、 こちらや、 http://okwave.jp/qa/q4513879.html こちらで http://d.hatena.ne.jp/nitoyon/20050917/p2 解決出来たのですが、V3での解決方法が分かりません。。 どなたかご教授願えないでしょうか。 よろしくお願いいたします。 ----------------------------------------------- <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8"></script> <script type="text/javascript"> var latlng = new google.maps.LatLng(lat, lng); var mapOptions = { zoom: 18, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, }; var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); </script> </head> <body> ～略～ <--! 写真を表示させるタブ --> <div id="photo" style="display: block;"> ～略～ </div> <--! /写真を表示させるタブ --> <--! Google Map を表示させるタブ --> <div id="gmap" style="display: none;"> ～略～ <div id="inner"> <div id="map_canvas" style="width:600px; height:400px;"></div> ～略～ </div> </div> <--! /Google Map を表示させるタブ --> </body> -----------------------------------------------
- ベストアンサー
- 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 mapのサイズのcssによる変更
現在webページをスクリーンサイズによってPCとスマホにCSSを切り替えることによって 振り分けています、この場合google mapのサイズを切り替えたいのですがうまくいきません。 google mapは <div id="map" style="width:606px; height:420px;"> のように指定しています。 やってみたのはPC用CSSをpc.css、スマホ用CSSをsm.cssとすると <div id="pcmap"> <div id="map" style="width:606px; height:420px;"> </div> <div id="smmap"> <div id="map" style="width:406px; height:420px;"> </div> と記述し、それぞれのCSSでdisplay:none;したのですが無条件で2件目のmapが表示されないためうまくいきません、CSSに関わらず二重設置になるからだと思います。 なにかいい方法はないでしょうか？
- ベストアンサー
- CSS
- javascriptでボックスの表示非表示
javascriptでボックスにマウスオーバーすると、同じ位置に別のボックスを表示させたいと考えています。 以下のようにしてみましたが、ie9ではできたのですが、 ie6、ie7、ie8ではdiv1とdiv2が横に並んでしまいました。 何か解決方法があれば教えてください。 よろしくお願いいたします。 <script type="text/javascript"> window.onload = function() { div1 = document.getElementById("div1"); div2 = document.getElementById("div2"); div1.onmouseover = function() { div1.style.display = "none"; div2.style.display = "block"; }; div2.onmouseout = function() { div1.style.display = "block"; div2.style.display = "none"; }; div1.style.display = "block"; div2.style.display = "none"; }; </script> <div id="div1" class="box01"> <div id="pic"><img src="image01.gif"></div> <div id="txt">てきすとてきすと</div> </div> <div id="div2" class="box02"> <div id="pic"><img src="image02.gif"></div> <div id="txt">てきすとてきすと</div> </div>
- ベストアンサー
- JavaScript
- Firefoxで表示できないのは何故でしょう？
お世話になります IE6、Operaでは表示できたのですがFirefoxでは表示できませんでした（＞＜） 何か見落としがあるのでしょうか？ <script language="javascript"> <!-- window.onload = function() { n=document.getElementById("div1").innerText; if(n == "a0"){ document.getElementById("img1").style.display = "block"; document.getElementById("img1").style.top = "100px"; document.getElementById("img1").style.left = "100px"; } if(n == "a"){ document.getElementById("img2").style.display = "block"; document.getElementById("img2").style.top = "100px"; document.getElementById("img2").style.left = "200px"; } } //--> </script> <div id="div1">a</div> <form action="test.cgi" method="post"> <input type="hidden"name="a" value="leap_day"> <input type="image" src="sample0.gif" id="img1" style="position:absolute;display:none;"> </form> <form action="test.cgi" method="post"> <input type="hidden"name="b" value="leap_day"> <input type="image" src="sample1.gif" id="img2" style="position:absolute;display:none;"> </form> n=document.getElementById("div1").innerText; if(n == "a0"){ } if(n == "a") { } を消すと表示はできるのですが・・・
- ベストアンサー
- JavaScript
- googleマップAPIにて緯度経度に加えてズームレベルを取得する方法がわかりません
こんにちは、いつもお世話になっています <head> <script src="http://maps.google.com/maps?file=api&v=2&key=googleマップキー" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ function onGMapClick(overlay, point) { if (point) { var request = GXmlHttp.create(); var url = "/php/date.php" + "?x=" + point.x + "&y=" + point.y; request.open("GET", url, true); request.onreadystatechange = function() { if (request.readyState == 4) { var xmlDoc = request.responseXML; var xy = xmlDoc.documentElement.getElementsByTagName("xy"); document.getElementById("show_x").innerHTML = xy[0].getAttribute("x"); document.getElementById("show_y").innerHTML = xy[0].getAttribute("y"); } } request.send(null); } } function onLoad() { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(36.03, 139.15), 13); GEvent.addListener(map, 'click', onGMapClick); } //]]> </script> </head> <body onload="onLoad()"> <div id="map" style="width:450px; height:450px"></div> <P>x : <div id="show_x"></div></P> <P>y : <div id="show_y"></div></P> </body> http://www.geekpage.jp/web/google-maps-api/gxmlhttp-5.php ここのサイトのソースを参考にgoogleマップAPIを利用したサイトを制作しています 経度、緯度の取得はできたのですが、残りのズームレベルの取得がいろいろ試してみましたができません このソースで「経度」「緯度」「ズームレベル」を取得して、変数urlに格納された/php/date.phpにデータを渡したいのですが、現在のズームレベルですら取得できない有様です どなたか教えていただけないでしょうか
- ベストアンサー
- JavaScript
- Google Maps API の IE表示
一部のIEでGoogle Maps APIがうまく作動しません。 Safari/FF/IE8 では表示されます。 以下の処理は一通り試しました。 http://maps.google.com/support/bin/answer.py?hl=ja&answer=21849# よろしくお願いいたします。 ■HTML … <link href="style.css" rel="stylesheet" type="text/css" media="screen, print "/> <link rel="stylesheet" type="text/css" href="map.css" media="screen, print "/> <script type="text/javascript" src="gmap.js"></script> <script src="http://maps.google.com/maps?file=api&v=2&key=●●●" type="text/javascript"></script> … <div id="canvas"></div> … ■JavaScript // JavaScript Document window.onload = function() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("canvas")); var point = new GLatLng(●緯度●, ●経度●) var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml('<img src="●●●.gif"><br/><div id="gma">〒●●●-●●●<br/>●●●<br/><br/>TEL:●●●</div><img src="●●●.jpg">')}); map.addOverlay(marker); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GMapTypeControl()); map.setCenter(point, 15); map.openInfoWindowHtml(point, '<img src="●●●.gif"><br/><div id="gma">〒●●●-●●●<br/>●●●<br/><br/>TEL:●●●</div><img src="●●●.jpg">'); } };
- ベストアンサー
- JavaScript
- 「ポタン」で表示・非表示 (つづき)(^^;
「ポタン」で表示・非表示 ブロック<Div></Div>の「表示・非表示」を「ポタン」でやりたいのですが。。の件で、下記の回答をいただき、できたのですが、 最初に「★非表示」の状態にしたい場合は、どうしたらいいのでしょうか? よろしく願いいたします。 <html> <body> <div id="a">abcdefg</div> <input type="button" value="on/off" onClick="disp('a')"> <hr> <div id="b">abcdefg</div> <input type="button" value="on/off" onClick="disp('b')"> <hr> <script> function disp(id){ // alert(document.getElementById(id).style.display=='none'?'block':'none'); document.getElementById(id).style.display = document.getElementById(id).style.display=='none'?'block':'none'; } </script>
- ベストアンサー
- JavaScript
- google map api のIE7の表示のバグについて教えてくださ
google map api のIE7の表示のバグについて教えてください。 google map api を実装したのですが、モダンブラウザとIE8では、問題無く表示されるのですが、IEではバージョンが7以下のブラウザでは、地図表示部分がグレーになってしまって全く表示されません。 IE6以下のブラウザは仕方無いとしても、IE7では正常に表示させたいのですが、どうしたらバグを解消できるか教えてください。 google map apiは、最新の「Version 3」を利用しました。 ソースは下記です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>××</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/page.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById('map'); var myOptions = { zoom: ズーム, center: new google.maps.LatLng(緯度, 経度), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, }; var map = new google.maps.Map(mapdiv, myOptions); }); </script> </head> <div id="map"></div> いろいろなサイトを見て調べてやってみたのですが上手くいきませんでした。 お手数かけて申し訳ありませんが、ホームページ初心者なのでご指導いただければ助かります。 なにとぞよろしくお願い致します。
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 できました！ 後でネットで調べてみたらどうもあちこちで報告されてる現象のようですね http://postal-search-apis-and-solutions.blogspot.com/2007/11/gmap2-optssize.html http://googlemaps.googlermania.com/modules/d3forum/index.php?post_id=61 http://d.hatena.ne.jp/nitoyon/20050917/p2 javascriptで「display='none'」ってやって最初のアクセス時に非表示にしてると発生する怪現象みたいです