javascriptでgooglemapを表示させたいのですが、firefoxで表示できず、空白になってしまいます
- javascriptでgooglemapを表示させたいのですが、firefoxで表示できず、空白になってしまいます。IEでは問題なく表示できています。何が問題でしょうか。
- HTMLとJavaScriptを使用して、javascriptでgooglemapを表示させる方法を探しています。firefoxでは表示されない問題がありますが、IEでは表示できます。解決策はありますか。
- firefoxでjavascriptでgooglemapを表示させる際に問題が発生しています。IEでは表示できるため、ブラウザの互換性の問題ではなさそうです。どのように解決すればいいでしょうか。
- ベストアンサー
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&v=2&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("ここが目的地です。"); } } ); } }
- magu3m
- お礼率33% (2/6)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ご提示のコードをそのまんま、コピペ（keyは変えましたが） して試しましたが、再現しません。 firefoxで普通に地図も吹き出しも表示されてます。 firefoxは最新V3.6.3ですが、関係ないような．．．．
関連するQ&A
- 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&v=2&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> どなたかご教授くださると助かります。 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- GoogleAPIの地図をPHP（Smarty）で表示させたい
PHPのSmartyを用いて、任意の住所の地図表示を行うテンプレートを作成しています。他の方が作られたサンプルプログラムを元に考えているのですが、地図が表示されないようです。 Smartyテンプレートとして、住所文字列を$event_locationとして格納し、その地図を表示させたいのですが、下記の2つのfunction部分で処理がとまるように見えています。 申し訳ございませんが、どなたか解決方法（下記以外の書き方でもかまいません）を教えて頂けませんでしょうか。 よろしくお願いいたします。 ---<googlemap.tpl>------------------------------- <!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 JavaScript API Example - simple</title> </head> <script src="http://maps.google.com/maps?file=api&v=2.x&key=GOOGLEAPIKEY type="text/javascript" charset="UTF-8"></script> <body onload="load();showAddress('{$event_location}')"> <div id="map" style="width:450px; height:400px"></div> <script type="text/javascript"> var map = null; var geocoder = null; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl( new GSmallMapControl() ); geocoder = new GClientGeocoder(); } } function showAddress(address) { if (geocoder) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); } } </script> <div id="map" style="width:500px; height:600px"></div> </body> </html>
- ベストアンサー
- PHP
- GoogleMapのGeocoderがlocalhostで正常に動作しません
今回質問させて頂きたい内容は、GoogleMapAPIのGeocoderについてです。 下記のサイトのプログラムをコピーし「httpd」を使用してlocalhost上（http://localhost/map/search.html）で動作させ検索した所「地名 not found」と表示されてしまいます。 htmlファイルを右クリックし直接IEで起動させると正常に動作するのですが、最終的にはphpで郵便番号から大体の住所を割り出して検索させたい為localhost上で動かしたいのです。 なぜ表示されないのか理由がわからず、ずっと悩んでいます。 なにとぞご教授いただけますよう宜しくお願いいたします。 参考サイト http://www.geekpage.jp/web/google-maps-api/geocoder-0.php ファイル名：search.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"> <head> <title>GClientGeocoderサンプル</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAANpz9YbJ9ituU8znrs9XJRhT9C0HjqPndW8ASVAENg0TnC9eCpxT0fY1KRBtIwNj2R0ym6ijrCZ0FhQ" type="text/javascript" charset="utf-8"></script> </head> <body onload="load()"> <div id="map" style="width:450px; height:400px"></div> <script type="text/javascript"> //<![CDATA[ var map = null; var geocoder = null; // 初期化 // <body onload="load()"> で呼び出されています function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.67431, 139.69082), 13); // GClientGeocoderを初期化 geocoder = new GClientGeocoder(); } } // 「移動する」ボタンを押されると実行されます function showAddress(address) { if (geocoder) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); } } //]]> </script> <form action="#" onsubmit="showAddress(this.address.value); return false"> <P> <input type="text" size="40" name="address" value="渋谷区1-1" /> <input type="submit" value="移動する" /> </P> <div id="map" style="width:500px; height:600px"></div> </form> </body> </html>
- ベストアンサー
- JavaScript
- 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&v=2&key=http://maps.google.com/maps?file=api&v=2&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の切り替えについて
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&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.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>
- ベストアンサー
- JavaScript
- Google maps API のマーカーを増やす
お恥ずかしながらJavascriptが全く分からない者です。 しかし、必要が生じ、いじっていますが、 下記のソースで、マーカーの個数を増やす場合、 何処のソースをどのように増やせばいいのでしょうか？ また、その他やり方がありましたら、 ご教授いただければと思い、 質問させていただきました。 よろしくお願いいたします。 <!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>テスト</title> <link href="../../css/css.css" rel="stylesheet" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script src="?http://maps.google.com/maps?file=api&v=2&key=?＊＊＊＊" type="text/javascript"></script> </head> <body> <h1>テスト</h1> <div id="map" style="width: 500px; height: 300px"></div> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); var point = new GLatLng(35.852766, 139.794382); map.setCenter(point, 16); var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(map, 'click', function(overlay, point) { if (overlay) { overlay.openInfoWindow( document.createTextNode("テスト")); } }); } //]]> </script> </body> </html>
- ベストアンサー
- HTML
- 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()"> 中略・・・ 初心者なもので、、、 ご回答お願いいたします。
- ベストアンサー
- JavaScript
- GoogleMapAPIで初期位置の表示
<?php $DBaddress = "大阪市北区芝田" ; ?> <!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 JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAKeodYAh1Nwl_nAMXwxLMtBSC5B7_MxPtqlxCQwd0QI3Cuv7JOxTp8TCJGdhudgycU3vU3mjNTZ5vhQ" type="text/javascript" charset="utf-8"></script> </head> <body onload="initAddress()"> <div id="map" style="width:450px; height:400px"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap2(document.getElementById("map")); var geocoder = new GClientGeocoder(); function showAddress(address) { geocoder.getLatLng( address, showTheLatLng ); } function showTheLatLng (latlng) { var address = document.getElementById("address").value; // 入力欄のidはaddress if (!latlng) { alert("ご指定の住所（" + address + "）はジオコーディングできませんでした。"); } else { map.setCenter(latlng, 13); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); var marker = new GMarker(latlng); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } //]]> </script> </body> </html> としてDBから値を受け取って初期の地図を表示したいです。 どのようにしたら良いでしょうか？
- ベストアンサー
- JavaScript
- GoogleMaps API 住所から複数ピンを表示
GoogleMaps API素人ですが・・・ 最近いろいろやっていてやっとDBの住所（日本語の住所 例：大阪府大阪市中央区平野町1丁目）を引っ張ってきてグーグルマップで座標を取得してピンを立てることに成功しました。 今苦戦しているのは同じ地図上に複数のピンをさす方法です。 どなかた教えていただけないでしょうか？ ちなみに今１ピン表示に成功してるコードはこちらです。 どこから、どこまで繰り返したらいいのでしょうか・・・？ －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ <? //DB（MySQL）からデータ取得 $address = $row["address"]; $fukidashi = "住所：".$row["address"]; ?> <div id="map" style="width:500px; height:400px; border:1px solid #999;"></div> <script type="text/javascript"> <!-- var map = null; var geocoder = null; var address = "<?=$address;?>"; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); geocoder = new GClientGeocoder(); geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " の住所が見つかりません"); } else { map.setCenter(point, 16); var marker = new GMarker(point); map.addOverlay(marker); //吹きだし情報 var msg_html1 = "<?=$fukidashi;?>"; marker.openInfoWindowHtml(msg_html1); } } ); } } //--> </script>
- ベストアンサー
- JavaScript
- 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&v=2&key=http://maps.google.com/maps?file=api&v=2&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
お礼
原因は分かりませんでしたが、 サーバの設定を初めからやり直してみたところ、解決いたしました。 ありがとうございました。
補足
サーバ側の設定の問題かと思い調べています。 分かったことを補足いたします。 ページ情報を見ると以前のサーバでは、MIMEタイプがtext/html となっていますが、今回のサーバでは、MIMEタイプがapplication/xhtml+xml となっています。 よろしくお願いします。