GoogleMapAPI V3でマップの表示がずれる問題について
- GoogleMapAPI V3のマップ表示での問題について教えてください。
- マップを表示させるタブのクリック時に、表示がずれてしまう問題が発生します。
- 解決方法が分からず、お知恵を拝借できないでしょうか。
- ベストアンサー
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> -----------------------------------------------
- chic_punk
- お礼率58% (17/29)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
GoogleMapAPI V3は、map表示が完了する前に、<div>ボックスを非表示に してしまうとおかしくなります。 やはり、フラグを一つ設けて、マップタイルロード完了のイベントで、 display:noneにするしかないかと．．． GoogleMapAPI V2 の方を使っていても、支障は無いと思います。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps V3で地図を表示する</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var disp_flag=true; google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById("map_canvas"); var myOptions = { zoom: 16, center: new google.maps.LatLng(35.686773, 139.68815), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var map = new google.maps.Map(mapdiv, myOptions); google.maps.event.addListener(map,'tilesloaded',function() { if(dispflg){ mapdiv.style.display="none"; disp_flag=false; } }); }); function mapshow(){ document.getElementById("map_canvas").style.display="block"; } </script> </head> <body> <button type="button" onclick="mapshow();">地図表示</button> <div id="map_canvas" style="width:600px;height:400px;"></div> </body> </html>
関連するQ&A
- javascriptで困ってます。
モーダルを実装するプラグイン「colorbox」を使用してgooglemapを表示しようとしてるのですがうまくいきません。以下のように作ってみたのですが、地図の一部しか読み込まれません。 いろいろ調べてみると非表示にしていたdivにgooglemapを読み込んでいるので、高さ、幅が決まっていない状態なので、地図の一部しか読み込まれないということでした。 <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> のあたりも無理な記述になっています。 colorboxで非表示になっていたdivが表示になったときに地図をきちんと読み込まれるようにするにはどのようにすればよいのでしょうか？よろしくお願いします。 <html> <head> <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/jquery.colorbox.js"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(34.0,135.0); var opts = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var m_latlng = new google.maps.LatLng(34.0,135.0); var marker = new google.maps.Marker({ position: m_latlng, map: map }); } $(function(){ $('.inline').colorbox({ inline:true, width:"80%", height:"80%", }); }); </script> </head> <body> <a href="#inline_content" class="inline" title="" >googlmap</a> <div style='display:none'> <div id='inline_content'> <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- GoogleMapsAPIのストリートビュー
GoogleMapsAPIでマーカーをストリートビューで表示させたい GoogleMapsAPIでマーカーを追加し移動もできるようにしましたが、 このマーカーのストリートビューを別窓で表示させる方法を教えていただけないでしょうか マーカーは人型のアイコンではなく、追加したマーカーです よろしくお願いします 以下、ソースです /////////////////////////////////////////////// <script type="text/javascript"> function initialize() { var map = new google.maps.Map( document.getElementById("gMap"),{ zoom : 16, center : new google.maps.LatLng(35.688272,139.696459), mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl : true } ); var marker = new google.maps.Marker({ position: new google.maps.LatLng(35.688272,139.696459), map: map, draggable : true }); } </script> <style> #gMap{ width: 900px; height: 500px; } #View{ width: 900px; height: 300px; border: 1px solid #000; /* この枠線内にストリートビューを表示させたい */ } </style> </head> <body onload="initialize()"> <div id="gMap"></div> <div id="View"></div> </body> ///////////////////////////////////////////////
- ベストアンサー
- 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 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
- Google Maps V3のズームの規制
現在htmlにはhead内に <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key=123456&sensor=false"></script> <script language="JavaScript" type="text/javascript" src="v3.js"></script> v3スクリプト内に //functionコード function mapload() { var latlng = new google.maps.LatLng(123,456); var opts = { zoom: 16, center: latlng, //マップタイプHYBRID（航空写真＋地図）ROADMAP（地図）SATELLITE（航空写真）TERRAIN（地形） mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeId: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN ] } }; //IDコード var map = new google.maps.Map (document.getElementById("map"),opts); //Marker var LatLng = new google.maps.LatLng(123,456); var contentString = 'ここです！'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var image = new google.maps.MarkerImage ('アイコンURL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var shadow = new google.maps.MarkerImage ('アイコン影画像URL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var marker = new google.maps.Marker({ position: LatLng, map: map, title: "ここです！",icon: image,shadow: shadow }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); } と記載し、html内のスクリプトのとこに表示しています。 表示される地図のズームを規制したいと考え、mapType.maxZoom = 19; mapType.minZoom = 2;のようなものを記入しても何も変化しません。 上記スクリプトの表記のどこに何を入れれば規制できるのでしょうか。 追伸、google.maps.MapTypeId.TERRAINと地図と地形のみ表示指定しているのですが、実際は、地図と航空地図になります。
- ベストアンサー
- 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
- googlemapについて教えてください。
googlemapでマーカーが追随するようにしたくて、function update(position) の関数のはじめにif(marker!=null){marker.setMap(null);}を入れてマーカーを消してから、次のマーカーがつくようにとしたつもりなのですが、うまくいきません。どのようにしたら、現在地にマーカーがつくようになるのでしょうか。下の場合マーカーがたくさんつきます。 よろしくお願いします。 <html> <head> <title>map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script type="text/javascript"> var gmap; window.onload = function(){ var myLatlng = new google.maps.LatLng( 33 , 130 ); navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1}); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; gmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function update(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var myLatlng = new google.maps.LatLng( lat , lng ); gmap.setCenter( myLatlng ); var marker = new google.maps.Marker({ position: myLatlng, map: gmap }); } function poserror(position){alert("error");} </script> </head> <body> <div id="map_canvas" style="width:95%; height:500px ; border:solid 3px #ccc;"></div> </body> </html>
- ベストアンサー
- JavaScript
- gmap ストリートビュー
普通の地図とストリートビューを両方表示したいですが。 どうもストリートビューのほうが不具合が生じます。 ストリートビューがない場所に近いところのストリートビューを表示したいですが、どうすればいいですか？ IEで見ると、ストリートビューの方角標識がズレてて、修正方法を教えていただけますでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- var map_canvas; function initialize() { var initPos=new google.maps.LatLng(35.658613,139.745525); var mapOptions = { center:initPos, zoom:14, mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl: true, mapTypeControl : true, mapTypeControlOptions : { style : google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; map_canvas = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var request = { address: "千葉県佐倉市ユーカリが丘４-５７５-２２" }; var geocoder = new google.maps.Geocoder(); geocoder.geocode(request, procGeocodeCallback); } function procGeocodeCallback(results,status){ var response; if(status == google.maps.GeocoderStatus.OK){ for (var i = 0; i < results.length; i++){ map_canvas.setCenter(results[i].geometry.location); openInfoWnd(results[i].geometry.location, results[i].formatted_address.replace(/^日本, /, '')); var markerOpts = { position : results[i].geometry.location, map : map_canvas }; var marker = new google.maps.Marker(markerOpts); // ストリートビュー表示 var svp = new google.maps.StreetViewPanorama( document.getElementById("street"), { position : results[i].geometry.location, pov : { heading : 90, // 東 pitch : 20, // 斜め上 zoom : 0.5 // ズームアウト } }); map_canvas.setStreetView(svp); // ストリートビューの方角などを求める function checkSTV(){ var pov = svp.getPov(); var hd = pov.heading; // 方角 var pt = pov.pitch; // 見上げる角度 var zm = pov.zoom; // ズーム alert("方角："+hd+"、角度："+pt+"、ズーム："+zm); } } } } function openInfoWnd(latlng,txt){ if( txt === undefined) { txt =""; } else { txt += "<BR>"; } var info = new google.maps.InfoWindow(); info.setContent("<div id=\"gmap_d\">" + "<span>" + "ユーカリが丘" + "</span>" + txt + "</div>".toString()); info.setPosition(latlng); info.open(map_canvas); } google.maps.event.addDomListener(window,"load",initialize); --> </script> <div id="map_canvas" style="width: 450px; height: 300px; float:left"></div> <div id="street" style="width: 300px; height: 300px; float:left"></div>
- 締切済み
- JavaScript
- Google Map （外部から情報ウィンドウ開く
Google Maps API v3 において「地図外のHTMLから地図内の情報ウィンドウを開く」ということをやろうとしているのですが、どうにもうまくいきません。 下記コードにおいて、地図外にある「あいうえお商店」や「かきくけこ不動産」をクリックした際、地図内に情報ウィンドウが開くようにするためにはどのようにすればよいでしょうか。 すでに丸3日間悩んでおり、私の力ではどうにもならないと判断したため、皆さまのお力をお借りすることにしました。大変恐れ入りますが、貧弱な知識の私にどうか知恵を与えてやって下さい。どうぞよろしくお願い致します。 深みにはまって抜け出せないコードは以下の通りです。 ---------------------------------------------------------------- <!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"/> <title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶 function initialize() { var latlng = new google.maps.LatLng(35.67105, 139.743624); var opts = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); // ***************１件目のデータ*************** var m_latlng1 = new google.maps.LatLng(35.675224, 139.737914); var marker1 = new google.maps.Marker({position: m_latlng1,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|3CFFF8|000000',title: '港区赤坂3-3-3' }); var contentString1= '</p>あいうえお商店</p></div>'; var infowindow1 = new google.maps.InfoWindow({content: contentString1 }); // ***************１件目のデータ*************** // ***************２件目のデータ*************** var m_latlng2 = new google.maps.LatLng(35.670772, 139.733875); var marker2 = new google.maps.Marker({position: m_latlng2,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|3CFFF8|000000',title: '港区赤坂5-5-5' }); var contentString2= '</p>かきくけこ不動産</p></div>'; var infowindow2 = new google.maps.InfoWindow({content: contentString2 }); // ***************２件目のデータ*************** google.maps.event.addListener(marker1 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow1.open(map,marker1); currentInfoWindow = infowindow1; }); google.maps.event.addListener(marker2 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow2.open(map,marker2); currentInfoWindow = infowindow2; }); } function myclick(idx) { google.maps.event.trigger(marker[idx],'click'); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 700px; height: 500px"></div> 1 <a href="javascript:myclick(0)">あいうえお商店</a></p> 2 <a href="javascript:myclick(1)">かきくけこ不動産</a></p> </body> </html> ---------------------------------------------------------------- 大変恐れ入りますが、どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- 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.event.addListener(map,'tilesloaded',function() { もしよろしければ、こちらもご回答頂けますと幸いです。 http://okwave.jp/qa/q6258704.html