the interesting part of the above web part is that the markers used to fly in to the locations based on the category. you can refer the following out of the box source code below with zero customization:

I was in a situation where i had to load a share point page into SPDialog (SP.UI.ModalDialog.showModalDialog) after removing the unwanted tags like header, footer, the ribbon, etc. (just need to add the class=”s4-notdlg” for the tags you are expecting not to be included in the dialog).

So in that case you will be in a situation where you may need to remove the background of the dialog which automatically inherits from the parent, etc in other words you may have to load a new CSS when the dialog window opens. Please follow the steps as below to load a CSS file on the fly.