Question

I am creating a little map app where you are given information, video and images regarding different campuses in a university.

I am using the customContent method to insert video player object into the infoWindow but when I do this it gets rid of my text content and becomes the only visible thing to the user.

How Can I work around this and have both text and video in the infoWindow?

Demo link

public function createMarker(latlng:LatLng, name:String, address:String, video:String):Marker
        {
            var marker:Marker=new Marker(latlng);

            marker.addEventListener(MapMouseEvent.CLICK, function(e:MapMouseEvent):void
            {
                //marker.openInfoWindow(new InfoWindowOptions({contentHTML:html + moulVid}));
                var infoWindow:InfoWindowOptions = new InfoWindowOptions();

                infoWindow.title = name;
                var videoPlayer:VideoPlayer = new VideoPlayer();
                videoPlayer.source = '../assets/video/' + video.toLocaleLowerCase();
                videoPlayer.autoPlay = false;
                videoPlayer.alpha = 0.8;

                titleFormat = new TextFormat();
                titleFormat.font = "Arial";
                titleFormat.size = 14;
                titleFormat.bold = true;

                contentFormat = new TextFormat();
                contentFormat.font = "Arial";
                contentFormat.size = 12;

                infoWindow.drawDefaultFrame = true;
                infoWindow.titleFormat = titleFormat;

                if (video != "") {
                    infoWindow.customContent = videoPlayer;
                    infoWindow.height = 300;
                }

                infoWindow.width = 380;

                infoWindow.content = address;
                infoWindow.contentFormat = contentFormat;

                infoWindow.padding = 10;

                marker.openInfoWindow(infoWindow);
            });

Answer 1

You need to create a new object, called it like VideoAndTextInfoWindow, make it extend DisplayObject. Now in that component’s constructor create and add a VideoPlayer and a TextField. This component may just publicly expose a videoSource and a text property. Create setters for those properties so that they set the correct properties on the VideoPlayer and TextField instances. Now set the infoWindow.customContent to a new instance of your VideoAndTextInfoWindow component.