Firefoxで表示できない問題

前へ 次へ
このQ&Aのポイント
  • JavascriptでGoogle Mapを表示していますが、Firefoxでは表示されません。
  • 他のサーバで使用していた際はFirefoxでも問題なく表示できていました。
  • 何が問題でしょうか？
回答を見る
  • ベストアンサー

javascriptでgooglemapを出力していますが、firef

javascriptでgooglemapを出力していますが、firefoxで表示されません。 他のサーバで使用していた際はfirefoxでも問題なく表示できていました。何が問題でしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title/> <script src="http://maps.google.com/maps?file=api&v=2&key=xxxxx" type="text/javascript"/> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.573027,xxx.xxxxxxxxx), 17); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); map.enableScrollWheelZoom(); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 450px; height: 300px;"/> </body> </html>

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

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

「他のサーバで使用していた際はfirefoxでも問題なく表示できていました」 という事は、別のサイト（ドメイン）に移したのですね。 GoogleのAPIキーを新しいサイトで取り直す必用があります。 http://code.google.com/intl/ja/apis/maps/signup.html

magu3m
質問者

補足

APIキーは新しいサイトのものを取り直しています。 今回のサイトはIEでは表示できていますのでAPIキーの設定ミスではなさそうです。 サーバ側の設定の問題かと思い調べています。 分かったことを補足いたします。 ページ情報を見ると以前のサーバでは、MIMEタイプがtext/html となっていますが、今回のサーバでは、MIMEタイプがapplication/xhtml+xml となっています。 よろしくお願いします。

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

関連するQ&A

  • GoogleMapを複数表示させたい

    GoogleMap　を　API　で２つ表示させて、それぞれの地図にマーカーをひとつずつつけたいです。 マーカーをつけて吹き出すをだすまではできたのですが、 マップをもうひとつ増やすにはどのように記述すればよいでしょうか？ 現在のソースは以下です -------------------------------------------------------- <!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> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> #Gmap{ width:500px; height:500px; } </style> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=http://maps.google.com/maps?file=api&amp;v=2&amp;key=" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //地図を作成 var map = new GMap2(document.getElementById("Gmap")); map.setCenter(new GLatLng(35.675845,139.744763), 15); //マーカーを作成 var marker = new GMarker(new GLatLng(35.675845,139.744763)); //マーカーをクリックしたら、吹き出しの中に写真を表示する GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("テキストが入ります"); }); //マーカーを地図上に配置 map.addOverlay(marker); //縮尺移動のコントロールを設置 map.addControl(new GLargeMapControl()); //地図衛星写真 切り替えボタンを表示 map.addControl(new GMapTypeControl()); //縮尺表示 map.addControl(new GScaleControl()); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="Gmap"></div> </body> </html> -------------------------------------------------------- よろしくお願いいたします

  • googleMapのマーカーがうまく表示されません

    googleMapを使って地図を表示させていますが、MarkerやopenInfoWindowといった関数の部分が上手く表示されません。具体的なスクリプトはこんな感じです。 <!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> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAREfirLNOQkMPltS0MtM_aRT2vOvOMLA6ksVZJNRPEoKnAz-wSxSLgFyYzSPMTRAqy1S4fTvUnXKX-g" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.689488, 139.691706), 20); map.addControl(new GLargeMapControl()); map.centerAndZoom(new GPoint(35.689488, 139.691706), 20); //マーカー var marker=new GMarker(new GPoint(35.689488, 139.691706)); map.addOverlay(marker); 　　　　　　　　//吹き出し var msg="ここです"; map.openInfoWindowHtml(map.getCenterLatLng(),msg); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 500px; height: 500px"></div> 　　<script type="text/javascript"> </body> </html> どなたかご教授くださると助かります。 宜しくお願いいたします。

  • GoogleMAPのIE8での印刷について

    goolgemapをAPIで設置しました なぜか、IE8で印刷プレビューをすると 1ページで収まるはずの印刷が、2ページになってしまい、 2ページ目にはgooglemapがはみ出しています CSSで設定したワイドサイズも無視して画面全体にgooglemapが広がった状態です DOCTYPE・・・　をはずせば大丈夫なようですが こちらをはずすとCSSが上手く動かくなってしまう為はずせません 何か解決策があれば教えてください 下記の通り、記述しました --------------------------------------------------------------------------- <!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> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>APIテスト</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=http://maps.google.com/maps?file=api&amp;v=2&amp;key=APIキー" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { //店舗の位置 var point = new GLatLng(35.681492,139.766071); //店舗を中心にマップ作成 var map = new GMap2(document.getElementById("gmap")); map.setCenter(point, 15); //店舗にマーク map.addOverlay(new GMarker(point)); //縮尺移動のコントロールを設置 map.addControl(new GSmallMapControl()); } } </script> </head> <body id="second" onload="load()" onunload="GUnload()"> <p style="height:700px; background:#CCCCCC;">余白</p> <div id="gmap" style="width:230px; height:380px;"> </div> </body> </html> ---------------------------------------------------------------------------

  • javascriptでgooglemapを表示させたいのですが、fir

    javascriptでgooglemapを表示させたいのですが、firefoxで表示できず、空白になってしまいます。 IEでは問題なく表示できています。何が問題でしょうか。 html部分です。 <!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" id="sixapart-standard"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=xxxxxx" type="text/javascript"></script> <script type="text/javascript" src="http://xxxxx.xxx/test.js"></script> </head> <body> <div id="map" style="width: 450px; height: 300px"></div> </body> </html> test.js部分です。 window.onload = function() { var map = null; var geocoder = null; if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.67431, 139.69082), 13); // GClientGeocoderを初期化 geocoder = new GClientGeocoder(); } if (geocoder) { geocoder.getLatLng( "東京都xx区xx", function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml("ここが目的地です。"); } } ); } }

  • googlemap api で複数マーカー表示

    複数のマーカー表示は最初できてたんですが、 住所から座標を取得してマーカーを複数表示ができません。。 <script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); //地図を作成 map.setCenter(new GLatLng(35.969115,139.372559), 8); //地図を表示（(中心の緯度,経度),縮尺） map.addControl(new GSmallMapControl()); //マップコントローラを付ける map.addControl(new GMapTypeControl()); //マップタイプコントローラを付ける map.addControl(new GScaleControl()); //スケールコントローラを付ける map.removeMapType(G_HYBRID_MAP); //マップタイプコントローラから地図+写真を削除する map.enableScrollWheelZoom(); //マウスホイールによるズーム処理を有効化 //マーカー追加プログラム function addMarker(lat,lng,html) { var geocoder = new GClientGeocoder(); geocoder.getLatLng ( lat, function(point) { var marker = new GMarker(new GLatLng(point,lng)); //マーカー生成 GEvent.addListener(marker,"mouseover",function(){marker.openInfoWindowHtml(html);});//マーカーにマウスが当たると情報ウィンドウを表示する map.addOverlay(marker); //マーカーをオーバレイ表示する } ); } //マーカー追加 addMarker("横浜市",'<p>html</p>'); addMarker("東京都",'<p>html</p>'); } } </script> </head> <body onload="load()" onunload="GUnload()"> 中略・・・ 初心者なもので、、、 ご回答お願いいたします。

  • GoogleMapのIEでのバグ

    以下の状況に大変悩んでおります、ご教授いただけたら幸いです。 東京都のとある場所を中心としてマップを表示するHTMLページを tokyo.htmlとして作成し、親ページのparent.html内の<IFRAME>タグで tokyo.htmlを読み込んで表示しているのですが、 極々一部のPCのInternetExplorer(IE6.0以上)で中心がマップの左上隅になってしまう現象が発生しております。 OperaやFirefoxではこのようにはならず正常です。 IEでもこちらで所有するほとんどのPCからはバグは出ません。 また、tokyo.htmlを直接開いてもバグはでません。 IFRAMEで呼び出すと発生します。 バグが出るものと出ないものの設定やIEバージョンの差も 今のところ見当たりません。 これらはテストページなのでコードもかなり簡素で特別なことはしていないのですが。。 本チャンでは必ずIFRAMEを使用して表示しなくてはならないのでなんとかしたいのですが見当が付く方おりませんでしょうか？ ちなみに<OBJECT>タグでの読み込みもテストしてみましたが同様の結果でした。 ■tokyo.html ------------------------------------------------------------------------ <!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" xml:lang="ja" lang="ja" dir="ltr"> <head> <script src="http://maps.google.co.jp/maps?file=api&hl=ja&v=2&key=xxxxxx" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function initLoad(){ var lat = '35.65863'; //緯度 var lng = '138.74541'; //経度 if(GBrowserIsCompatible()){ var map = new GMap2(document.getElementById("map")); var point = new GLatLng(lat,lng); map.setCenter(point, 10); map.addControl(new GSmallMapControl()); map.addControl(new GScaleControl()); map.addControl(new GMapTypeControl()); map.setMapType(G_HYBRID_TYPE); var marker = new GMarker(point); map.addOverlay(marker); } } //]]> </script> </head> <body onload="initLoad()" onunload="GUnload()"> <div id="map" style="width:500px; height:500px;"></div> </body> </html> ------------------------------------------------------------------------ ■　parent.html ------------------------------------------------------------------------ <html> <body> <table> <tr><td>test</td></tr> <tr><td> <iframe src="tokyo.html" height="500" width="500" frameborder="0"></iframe> </td></tr> </table> </body> </html> ------------------------------------------------------------------------

  • GoogleMAPの切り替えについて

    Javascriptのエラーについて質問させてください。 １つのページで、２種類のGoogleMAPを切り替えたいと思っています。しかし、以下のように記述したところ「"offsetwidth"はnullまたはオブジェクトではありません。」とエラー表示されてしまいます（確認ブラウザ：IE6、FireFOX3、Safari、Googlechorome）。 一体、何がマズイのかさっぱりわからなくなり、困り果てて質問しています。どうかお力をお貸しください。 宜しくお願いします。 <!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"> <link rel="stylesheet" href="style_sheet.css" type="text/css"> <title>マップテスト</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=グーグルマップAPIキー" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //エリア１マップ用設定開始。 var map = new GMap2(document.getElementById("map")); //コントロール追加表示。右下縮小図とコントロールバー。 map.addControl( new GSmallMapControl() ); map.addControl( new GOverviewMapControl() ); //店舗のマーカー表示 var point1 = new GLatLng(座標,座標); map.setCenter(point1, 10); var point2 = new GLatLng(座標,座標); map.setCenter(point2, 10); var point3 = new GLatLng(座標,座標); map.setCenter(point3, 10); //アイコンのための宣言 var icon = new GIcon(); // アイコン画像のURL icon.image = "./img/hoge.png"; // アイコン画像のサイズ icon.iconSize = new GSize(50, 25); // アイコンの表示場所 con.iconAnchor = new GLatLng(32, 0); // マーカーの表示 map.addOverlay( new GMarker(point1, icon) ); map.addOverlay( new GMarker(point2, icon) ); map.addOverlay( new GMarker(point3, icon) ); //デフォルトの表示 map.setCenter(new GLatLng(座標,座標), 10); } } function load2() { if (GBrowserIsCompatible()) { //エリア２マップ用設定開始。 var map2 = new GMap2(document.getElementById("map")); //コントロール追加表示。右下縮小図とコントロールバー。 map2.addControl( new GSmallMapControl() ); map2.addControl( new GOverviewMapControl() ); //店舗のマーカー表示 var point21 = new GLatLng(座標,座標); map2.setCenter(point21, 10); var point22 = new GLatLng(座標,座標); map2.setCenter(point22, 10); var point23 = new GLatLng(座標,座標); map2.setCenter(point23, 10); var point24 = new GLatLng(座標,座標); map2.setCenter(point24, 10); //アイコンのための宣言 var icon2 = new GIcon(); // アイコン画像のURL icon2.image = "./img/hoge2.png"; // アイコン画像のサイズ（横幅/縦幅） icon2.iconSize = new GSize(50, 25); // アイコンの表示場所 icon2.iconAnchor = new GLatLng(32, 0); // マーカーの表示 map2.addOverlay( new GMarker(point21, icon2) ); map2.addOverlay( new GMarker(point22, icon2) ); map2.addOverlay( new GMarker(point23, icon2) ); map2.addOverlay( new GMarker(point24, icon2) ); //デフォルトの表示 map2.setCenter(new GLatLng(座標,座標); 12); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <a href="#" onclick="load()">エリア１</a>｜ <a href="#" onclick="load2()">エリア２</a>｜ <!-- マップ表示用DIV --> <div id="map" style="width:700px;height:350px;"></div> </body> </html>

  • GoogleMapのmoveイベントのjavascriptがFirefoxで表示がおかしくなる

    地図をドラッグすると 緯度と経度がテキストエリアに入力されるスクリプトですが、 マップの初期値とMoveイベントでゲットした数値が Firefox（Ver.1.0.7）でダブって表示されてしまいます。 （IE6、IE7ではMoveイベントでゲットした数値のみ反映されます） ソースは下記になりますが、 初期値が反映されないようにする方法はありますでしょうか。 <html> <head> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=xxxxxx" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="map" style="width:400px; height:450px"></div> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.658632, 139.745411), 13); map.addControl(new GLargeMapControl()); } GEvent.addListener(map, 'moveend', function() { var xy = map.getCenter(); document.getElementById("data_x").innerHTML = xy.lng(); document.getElementById("data_y").innerHTML = xy.lat(); }); //]]> </script> <textarea name="kdo" cols=25 rows=1 wrap=soft id="data_x"></textarea> <textarea name="ido" cols=25 rows=1 wrap=soft id="data_y"></textarea> </body> </html> 以上です。 よろしくお願いいたします。

  • googleマップがWinIEのみエラーになってしまします。

    googleマップの地図をサイトに入れているのですが、WinIEのみ６も７も表示されません。FireFOX,Safariなどは閲覧できます。 地図が表示されないだけでなく、ページ自体がエラーで表示できなくなってします。(地図以外の静的なHTMLも) 記述以下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>タイトル</title> </head> <script src="http://maps.google.co.jp/maps?file=api&amp;v=2&amp;key=キー" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(緯度を入れています), 0); var point = new GPoint(緯度を入れています); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindow("<!--<img src=images/byld.jpg>--><img src=/images/logo02.gif>"); //]]> </script> 原因かどうか解りませんが、同じURLでAPIキーを取得2回取得しています。（1回目のキーを忘れてしまったので） 何かおわかりのことがありましたら教えてください。よろしくお願いします。

  • google mapのピンを変更したい

    お店の位置をホームページ上でgoogle mapを使い、お客様にお知らせしたいので、API keyを取得し、位置情報などを入力しているのですが、初期設定の赤いピンマークをお店のオリジナルピンマークに変更したいのですが、方法がわかりません。 書いたコードは… <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <script src="http://maps.google.com/maps?file=api&v=1&key=取得したAPI key" type="text/javascript"></script> </head> <body> <div id="map" style="width: 800px; height: 600px"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(135.50537109375,34.687427949314845), 7); //　センター 位置 map.centerAndZoom(new GPoint(135.50537109375,34.687427949314845), 7); // お店位置 var point = new GPoint(お店の位置情報); // お店紹介 var html = "<div style='width:350px;font-size:12px;' ><table><tr><td><img src=画像アドレス ></td><td>郵便番号 <br>住所 <br>電話番号<br><br>営業時間<br><br>最寄り駅紹介</td></tr></table></div>"; var marker = createMarker(point,html); map.addOverlay(marker); var marker = createMarker(point,html); map.addOverlay(marker); function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]> </script> </body> </html> 以上を入力しました。 この中のどの部分にピン情報を入力すればいいのか？ また、どのように入力すればいいのかを教えていただきたいのです。 ご教授お願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する