- ベストアンサー
Google Mapsがテーブルタグの中で使えない理由とは？
- IE6、IE7でGoogle Mapsから取得した地図データをテーブルタグの中で表示しようとすると、地図がグレーになり表示のできない問題が発生しています。
- 同じコードでもFirefox2は正常に表示できることから、IEのバージョンごとに互換性の問題があることが考えられます。
- 表示場所をテーブルタグの外に移すとIEでも正常に地図を表示できるため、テーブルタグとGoogle Mapsの相性の問題が原因とされています。
- kinmojr
- お礼率82% (129/156)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
先週、同じ問題で悩んでました。 スクリプトをtableの外に出して困る事ありますか。 なければ、スクリプトを出してＯＫです。 <!DOCTYPE html PUBLIC "-//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> <title>Google Maps Example</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <table style="width: 600px;"> <tr> <td> <div id="map" style="width:350px; height:300px;"></div> </td> </tr> </table> <script src="http://maps.google.com/maps?file=api&v=2&key=キー" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ var map = new GMap2(document.getElementById("map")); var geocoder = new GClientGeocoder(); geocoder.getLatLng('new york', function(point) {map.setCenter(point, 13);}); //]]> </script> </body> </html>
お礼
ご回答いただき、ありがとうございます。 ご指摘のとおり修正したところ、正常に動作しました。 JavaScriptの位置は変えて試していませんでした。 助かりました。 ありがとうございます。
補足
すみません、元のスクリプトを書き間違えていましたので、修正させていただきます。 <div id="map">はテーブルタグの中でした。 <!DOCTYPE html PUBLIC "-//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> <title>Google Maps Example</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <script src="http://maps.google.com/maps?file=api&v=2&key=[キー値]" type="text/javascript" charset="utf-8"></script> <table style="width: 600px;"> <tr> <td> <div id="map" style="width:350px; height:300px;"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap2(document.getElementById("map")); var geocoder = new GClientGeocoder(); geocoder.getLatLng('new york', function(point) {map.setCenter(point, 13);}); //]]> </script> </td> </tr> </table> </body> </html>