google map api のIE7の表示のバグについて教えてください
- google map api のIE7の表示のバグについて具体的な問題と解決方法を教えてください。
- 最新のgoogle map apiでIE7の表示バグが発生しています。地図表示部分がグレーになり、全く表示されません。IE6以下のブラウザは仕方ないとしても、IE7では正常に表示させたいです。
- google map apiのソースを示していますが、上手く動作しません。ホームページ初心者なので、ご指導いただけると助かります。
- ベストアンサー
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> いろいろなサイトを見て調べてやってみたのですが上手くいきませんでした。 お手数かけて申し訳ありませんが、ホームページ初心者なのでご指導いただければ助かります。 なにとぞよろしくお願い致します。
- ryoazuma
- お礼率85% (6/7)
- JavaScript
- 回答数1
- ありがとう数7
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
IE7でのみ表示出来ないのは、 あなたのバグです。 var myOptions = { zoom: ズーム, center: new google.maps.LatLng(緯度, 経度), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, }; 最後の','が余分です。取って下さい。 var myOptions = { zoom: ズーム, center: new google.maps.LatLng(緯度, 経度), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; 本件の原因はAPI側じゃないと思いますが、 それにしてもGoogleMapAPI Ver3 は変な癖が多くて、．．．． かえって使いにくいです（慣れかなあ） Ver2系の方が安定しています。
関連するQ&A
- google map api v3の表示の不具合について教えてください
google map api v3の表示の不具合について教えてください。 google map api v3を実装してマーカーをつけたのですが、あれこれ直していたら表示されない箇所ができてしまいました。（下記画像参照） ソースは下記です。 <!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> 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); var marker = new google.maps.Marker({ position: new google.maps.LatLng(緯度, 経度), map: map, title: '名称' }); }); </script> </head> <div id="map"></div> お手数かけて申し訳ありませんが、ホームページ初心者なのでご指導いただければ助かります。 なにとぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- HTML5でのgoogle map api v3の
HTML5でのgoogle map api v3の実装についておしえてください。 HTML5でのホームページを初めて制作して、google map api v3を実装したのですが、モダンブラウザとIE8では、問題無く表示されるのですが、IEではバージョンが7以下のブラウザでは、地図表示部分が全く表示されません。 IE6以下のブラウザは仕方無いとしても、IE7では正常に表示させたいのですが、どうしたらバグを解消できるか教えてください。 ソースは下記です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>××</title> <link href="css/page.css" rel="stylesheet" /> <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> <body onload="initialize()"> <div id="map"></div> 僕のソースの記述にどこか間違いがあるのか？ それともHTML5では、v3を実装してIE7で正常に表示することができないのか？ いろいろなサイトを見て調べたのですがわかりませんでした。 ホームページを作り始めて間もないので、ご指導いただければ助かります。 なにとぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- Google mapV3 display=non
失礼いたします。 Google maps V3 をタブメニューの中で表示させたいのですが、初期状態がdisplay=”none”のため、うまく表示できません。 Mapのタブメニューを初期状態で開いている display=”list-item” の状態だとうまく表示できています。 ・初動 display:none ↓ ・Map呼び出し前にjsにて強制表示 display:block ↓ Mapのtilesloadedイベント完了後に display:none のような流れで回避できるようですが、javascript の知識がないのでたいへん困っております。 現在 <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_canvas'); var myOptions = { zoom: 17, center: new google.maps.LatLng(緯度, 経度), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, }; var map = new google.maps.Map(mapdiv, myOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(緯度, 経度), map: map, title: 'タイトル' }); }); </script> となっております。 たいへんお手数ですが、どなたかご教授頂けると助かります。
- ベストアンサー
- JavaScript
- 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をiframeで表示させた後、GoogleMapA
google mapをiframeで表示させた後、GoogleMapAPIを使用して地図を カスタマイズする方法を教えてください。 Google Map APIおよび、htmlのコーディングに関しても全くの初心者です。 マップ上にマーカーを表示させたくて下記のように見よう見まねでプログラミングしましたが 地図は表示されますが、マーカーが表示されませんでした。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt … <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& …キー]" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); var marker = new GMarker(new GLatLng(34.685567, 135.527467)); map.addOverlay(marker); } } //]]> </script> </head> <iframe width="600" height="600" frameborder="1" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps/ms?ie=UTF8&hl= … msid=..................;z=5&output=embed"> </iframe> </html> 関数を記述する場所がまちがっているのか、ほかに記述するべき関数がいるのか、 大変初歩的で申し訳ないのですが、ご回答のほどよろしくお願いします。
- ベストアンサー
- HTML
- 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"> <!-- var myLatLng = new google.maps.LatLng(35.yyy,139.zzz); //地図を表示 var myMap = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scrollwheel: false }); //円を2個表示 new google.maps.Circle({ center: myLatLng, // 中心点(google.maps.LatLng) fillColor: '#ff0000', // 塗りつぶし色 fillOpacity: 0.1, // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明） map: myMap, // 表示させる地図（google.maps.Map） radius: 5000, // 半径（ｍ） strokeColor: '#ff0000', // 外周色 strokeOpacity: 0.6, // 外周透過度（0: 透明 ⇔ 1:不透明） strokeWeight:2 // 外周太さ（ピクセル） }); new google.maps.Circle({ center: myLatLng, // 中心点(google.maps.LatLng) fillColor: '#0000ff', // 塗りつぶし色 fillOpacity: 0.07, // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明） map: myMap, // 表示させる地図（google.maps.Map） radius: 10000, // 半径（ｍ） strokeColor: '#0000ff', // 外周色 strokeOpacity: 0.6, // 外周透過度（0: 透明 ⇔ 1:不透明） strokeWeight:2 // 外周太さ（ピクセル） }); //マーカーを表示 var markerImage = 'marker_aa.gif'; var marker = new google.maps.Marker({ position: myLatLng, map: myMap, icon: markerImage }); //--> </script> ----------------------------------------------------------------------------- 以上、JavaScript記述終わり。
- ベストアンサー
- JavaScript
- Google maps API V3 検索ボックス
Google maps API V3 で、kmlファイルを利用した地図（http://itohiki119.iinaa.net/bousai/test.html） を作成しました。 この地図に検索ボックスを追記したいのですが、上手くいきません。 お知恵をお貸し下さい。m(_ _)m 一応、http://code.google.com/p/gmaps-api-v3-googlebar/downloads/list からダウンロード (1) gmaps-api-v3-googlebarから入手したファイルを解凍。 (2) その中のjGoogleBarV3.jsとdefault.cssを適当な位置に配置。 (3) scriptとlinkを追加。 してみたのですが、ダメでした。 もともとの、htmlは、下記の通りです。 _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>避難所マップ</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&language=ja"></script> <script type="text/javascript"> function initialize() { var initPos = new google.maps.LatLng(34.794267, 134.717400); var myOptions = { zoom : 15, center : initPos, mapTypeId : google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var kmlOptions = {preserveViewport: true} var ctaLayer = new google.maps.KmlLayer('http://itohiki119.iinaa.net/bousai/test.kml', kmlOptions); ctaLayer.setMap(map); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 100%; height: 100%;"><br /></div> </body> </html> _/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ よろしくお願い致します。
- ベストアンサー
- JavaScript
- googlemap v3 のDTD宣言について
お世話になります。 googleAPI のリファレンスから googlemap v3 のソースを Dreamweavrにコピペしてブラウザで表示できます。 これをDWで「XHTMLに変換」するとまったく表示されません。 どうしたらいいのでしょうか？ 1行目のコードが変わるだけなのですが、表示されないのはなぜですか？ 他のさくらエディタなどにコピペしても同じ結果です。 サイトはXHTMLで記述しているので統一したいのですが・・・ 地図だけをiframeに入れて、という逃げ方もありますが納得できないのです。 ご存知の方がおられましたら教えてください。 よろしくお願いします。 <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"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
- ベストアンサー
- AJAX
- 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 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
お礼
教えていただいたとおりにしたら、IE7でも表示できるようになりました。 本当にありがとうございました。