Embed a map or OverviewMap in an InfoWindow/Popup

Question

Our page has a main map area with sidebar widgets that trigger different functionality. The widget I'm working with at the moment is going to be annotating points on the map with details including location data. The general workflow is:

1. User opens widget
2. User clicks draw region
3. Path is drawn on map
4. User clicks on map graphic to trigger popup

I've been searching for a way to combine the functionality of a Popup with that of the OverviewMap. That is, I would like to embed an OverviewMap (or, really, an arbitrary, full second map window) inside a popup. In the picture below, where the image is in the popup is where I'd ideally be inserting the map.

I began by trying to simply provide a div in the InfoTemplate that I could replace programmatically.

var plinePointInfoTemplate = new InfoTemplate({
  title: "Segment Information",
  content:  "Segment Start  : ${segStartX}, ${segStartY} <br>" +
            "Segment End    : ${segEndX}, ${segEndY} <br>" +
            "Segment Length : ${segLength} <br>" +
            "Average Speed  : ${segSpeed} <br>" +
            "Time To Next Pt: ${segETA} <br>" +
            "<div id=\"infoWindowMap\" " + 
                "data-dojo-type=\"dijit/layout/ContentPane\">Map Goes Here</div> <br>" +
            "<img src=\"http://lorempixel.com/400/200\" />"
});

...

//Populate map in popup
var templateMap = new OverviewMap("infoWindowMap", {
                  basemap: "satellite",
                  center: [-46.807, 32.553],
                  zoom: 3
                  }, 'infoWindowMap'
                );
templateMap.startup();

This hasn't been working (per the picture). I'm pretty new to working with the API and am unsure what exactly is wrong with my approach. It kind of seems like I'm trying to construct the overview map too late in the game - the infowindow and its contained divs don't actually exist until the click event on the first graphic. Is there a way to trigger it's construction after the rest of the page has been built? Am I barking up the wrong tree entirely?

None of the examples I've seen have constructed an overview map after the fact.

Answer 1

I have what you want working, creating the map object after the Popup is opened, and destroying it when closed. It's not a perfect example (there seems to be a small error), but I think it gets you pointed in the right direction:

Example code: https://jsfiddle.net/gavinr/uhfc4t0z/5/

Video in action: http://i.imgur.com/e9HCvIj.gifv