マップの埋め込み：最初のポップアップの背景が透明

Question

Web マップを自分のサイトに埋め込んでいます。マップはいくつかのエリアに分かれていて、それぞれのエリアをクリックすると、そのエリアについての詳しい情報を示すポップアップが表示されます。困っているのは、このポップアップが正しく表示されないことです。背景が透明になっていて、初期 CSS で display:none; または width:0; が設定されているようです。そのため、正しく表示されません。

マップの埋め込みは、タブ（JavaScript の機能）の背後で最初は非表示（display:none;）になっています。これが問題の原因ではないかと思います。

「最大化」アイコンをクリックすると白い背景が表示され、すべて期待どおりに動作します。

表示／非表示を切り替えるタブには、次の JavaScript を使用しています。

http://jsbin.com/lorovu/edit?html,js

ページの読み込み後、またはタブをクリックしたときに、マップを再描画したり、幅・高さ・表示の値をリセットしたりする方法はありますか？最初からポップアップを白い背景で通常どおり表示し、内容を読めるようにしたいです。

ありがとうございます。

Dave

khutchins · Answer

Just tested the jsbin in incognito mode and I can't repro either the popup issue or the console errors you are seeing. Also tried testing the map outside of an iframe in incognito mode and everything is working for me.  Tested in Chrome on Mac.

https://rrpdc.maps.arcgis.com/apps/Embed/index.html?webmap=89edafaaf60b4d2383e825a682ed3221&extent=-78.4946,37.1293,-76.…

deleted-user-pDhHNdx3RgUH · Answer

Kelly Hutchins , actually, upon further review, it's sometimes working, and sometimes not working. I've cleared all my cache, and have tried opening it in a private browsing window. I'm testing mostly in Chrome on Mac, but I'm seeing the issue in Mac/Safari as well. And in Mac/Firefox, the iframe actually doesn't load on the initial page load. If I right-click and choose "reload frame," it then displays correctly. I noticed some errors with the js.arcgis.com files in the web console (attached screenshot). Not sure if you were aware of those.

And upon pulling up your example on JS Bin again, I was seeing the problem right there in JS Bin. If you clear your cache, or try it in a private browsing window, I think you might be able to re-create it. It seems as though if you have already loaded that maps URL in your browser once, it will work fine. But if it is the very first time you are loading that map, that's when the issue arises.

Is there any way, using javascript, to reload the map when an element on the page is clicked? I could try adding that code to my javascript that runs on the clicking of the tabs that show/hide the map.

Thanks!

JS Bin, error reproduced

Web console errors in Mac/Firefox

deleted-user-pDhHNdx3RgUH · Answer

Thanks Kelly. I really appreciate you trying to recreate the issue in JS Bin.

Without changing any code, the issue appears to have resolved itself. I did launch the site on a live domain, and it's now served up via https, but those are the only things I can think of that have changed from the testing environment.

Either way, it's working now, which is fantastic.

Happy New Year!

Dave