GoogleMaps上のInformation Windowに不用なスクロール・バーが表示される

[たそがれ長兵衛]

GoogleMapsにOverlayさせたMarkerをクリックして表示するInformation Windowに不用なスクロール・バーが出てしまって困っています。

この問題はBrowserがFireFoxとGoogle Chromeでは起きないのですが、Windows IE10だけに起こります。

問題のWebPageは：　http://longhat.fan-site.net/folder_hosomichi/tr_sp/tr_sp.html　
　
GoogleMapsにOverlayしているkmlファイルは：
      http://longhat.fansite.net/folder_hosomichi/
     tr_sp/kml/rt_mt_moon_shizu_midagahara.kml

このページに適用しているCSSは：
　　　http://longhat.fansite.net/folder_hosomichi/
　　　tr_sp/css/hosomichi_style_sp.css"　

 

Information Windowの表示の様子を示す画像を貼付」します。

 

 

以上、問題解決に関するご示唆を戴きたいと思っています。

chobeより

[たそがれ長兵衛]

前の投稿でIE10でInformationWindowを表示した場合のスクリーン・ショットの画像を添付しましたが、下にFireFoxでのスクリーン・ショットの画像を貼付します。

 

 

 

ご覧のようにFireFoxでは不要なスクロール・バーは表示されません。GoogleChromeでも同様に不要なスクロール・バーは表示されません。

小生の希望は閲覧者が多いIEでもこのように格好の悪いスクロール・バーは表示させたくないということです。

 

この投稿とは別にこの問題をMicrosoftCommunityに投稿しましたら、大方のご意見はGoogleMapsV3のAPIがどのような動的コードを生成しているかにかかっているという事でした。

 

この問題解決に有効なご示唆を戴きたいと願っています。

 

chobeより

 

 

 

2013年10月11日金曜日 15時46分46秒 UTC+9 たそがれ長兵衛:

[Masashi.K]

chobeさん

IE10がないので確認が遅れました。すみません。

ページのソースコードを見たら、v=3.4をしていますが

v=3としてみていただけますか？

よろしくお願いします。

2013年10月11日金曜日 23時49分23秒 UTC-7 たそがれ長兵衛:

[たそがれ長兵衛]

Masashi.Kさん

 

何時もお世話様になっています。

 

ご指示のようにGoogleMapsAPIのVersionを3.4から３に変更してみましたが、何の変化もなく相変わらずIEでは不用なスクロールバーが現れます。

 

chobeより

2013年10月11日金曜日 15時46分46秒 UTC+9 たそがれ長兵衛:

GoogleMapsにOverlayさせたMarkerをクリックして表示するInformation Windowに不用なスクロール・バーが出てしまって困っています。

[KF]

見てみましたが、Win7+IE10だとver 3指定でもでますね。3.expのように指定してみると、どうでしょう？

あと、バージョンダウンで3.1とか昔のを指定してみると、どうでしょう？

開発者ツールで見るとcssでoverflow: autoをoverflow:noneにすると出なくなるのですが、これはGoogle Maps API側が出力する部分なので、いじるのはよくないかと思います。

スクロールバーがでると写真や文章が隠れてしまって何ともですが、どうしても解決できなかった場合は表示する内容を少し大きくしてまわりに余白（マージン）を作っておく、というのもありかなと思います。

他に思いつくのはInfowindowのオプションでmaxWidthあたりでしょうか。

[たそがれ長兵衛]

KF さん

 

ご示唆有難うございました。

 

Win7+IE10でGoogleMaps API v３．１でもｖ3.expでも改善されませんでした。所で、3.expとはどういうversion

でしょうか？

 

あと、InfowindowのオプションでmaxWidthを指定することですが、scriptの中のcodingの仕方がよく判りません。

例えば、現在のcodeの

　　　　　var infoWnd = new google.maps.InfoWindow();

を次のように変えれば良いのでしょうか？

　　　　　var iwopts = {
    　　　　　　　　maxWidth: 270
　　　　　　　}; 

 　　　　var infoWnd = new google.maps.InfoWindow(iwopts);

 

この場合、infwindowsの横幅を270pxlにしてその中に横幅260pxlのimageを入れようという意図です。

 

以上、宜しくお願いします。

 

chobeより

 

　　　　　

2013年10月31日木曜日 10時36分31秒 UTC+9 KF:

[KF]

3.expは最新お試し版です。

https://developers.google.com/maps/documentation/javascript/3.exp/reference

　今は3.14になります。

https://developers.google.com/maps/documentation/javascript/3.exp/reference

　でも、解決するかどうかはやってみないと分かりません。地図の色が変わるので分かるかなと思います。 

　Windows 8+IE11だと、どうかなと思って見てみましたが、やはり情報ウィンドウにスクロールバーが出てしまいます。

[KF]

情報ウィンドウの設定も、そんな具合でよいと思いますので、やってみてください。

16〜32ピクセルほどコンテンツサイズが小さければスクロールバーはでないのではないかと思います。

 

[たそがれ長兵衛]

KF さん

 

ご示唆下さったmaxWidthを中に入るimageやtextの幅の260ｐｘｌより大きい270pxlや280pxlにしてみましたが

相変わらずfirefox GoogleChromeでは問題ないのですがIE10では醜いスクロール・バーが出てしまいます。

IEだけが問題あるのは何故なのでしょうかね。

 

念の為JacaScriptのコードを下にコピーして添付してみます。

 

//-----------------------------------
//Display GoogleMaps & WayPoint Layer
//-----------------------------------
function initialize() {
 var myLatlng = new google.maps.LatLng(38.5321791666667,140.009649722222);
 var myOptions = {
  zoom:7,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var mapCanvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 var ctaLayer = new google.maps.KmlLayer(               　　　　　　　　   "http://longhat.fan-site.net/folder_hosomichi/tr_sp/kml/rt_mt_moon_shizu_midagahara.kml",{
       suppressInfoWindows : true
     });

     ctaLayer.setMap(mapCanvas);
 
  var iwopts = {
    　　　　　　　　maxWidth: 280
　　　　　　　};

  var infoWnd = new google.maps.InfoWindow(iwopts);

        google.maps.event.addListener(ctaLayer, "click" ,function(kmlMouseEvent) {
          infoWnd.setContent(kmlMouseEvent.featureData.infoWindowHtml);
          infoWnd.setPosition(kmlMouseEvent.latLng);
          infoWnd.setOptions({
            pixelOffset: kmlMouseEvent.pixelOffset
          });
          infoWnd.open(mapCanvas);
        });
      }
      google.maps.event.addDomListener(window, "load", initialize);
</script>

 

以上

 

chobeより

2013年11月2日土曜日 12時36分01秒 UTC+9 KF: