Flyout dismiss issue with bing map in HTML/JS


  • Im added bing map in to flyout. Once click on the map flyout always dismiss. Any solution for this. previous threads are not work for me.

        <button id="demoFloyoutButton" class="action">
       Show Demo Flyout</button>   
          <div id="demoFlyout" data-win-control="WinJS.UI.Flyout">      
           <div id="testmap"></div>  


      app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                } else {
                args.setPromise(WinJS.UI.processAll().then(function () {
                    Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap });
        function initializeSettings() {
            // Initialize all settings flyouts and WinJS controls.
            // Populate settings pane and tie commands to settings flyouts.
            WinJS.Application.onsettings = function (e) {
                e.detail.applicationcommands = {
                    "defaultsDiv": { href: "DefaultsUI.html", title: "Defaults" },
                    "helpDiv": { href: "HelpUI.html", title: "Help" }
        (function () {
            "use strict";
            var page = WinJS.UI.Pages.define("default.html", {
                ready: function (element, options) {
                    document.getElementById("demoFloyoutButton").addEventListener("click", showDemoFlyout, false);
            // Show the flyout
            function showDemoFlyout() {
                var formatTextButton = document.getElementById("demoFloyoutButton");
        //var map = null;
        function initMap() {
            //var md = new Windows.UI.Popups.MessageDialog("in Map");
            try {
                var mapOptions =
                    credentials: " 	Ai5r7K1Jy95BfrDbOV9PPvoBqYicNNe3Bapi7PczGda-l30CjbpHeLnK8XQmYcKl",
                    center: new Microsoft.Maps.Location(7, 80),
                    mapTypeId: Microsoft.Maps.MapTypeId.road,
                    zoom: 7,
                var mapDiv = document.querySelector("#testmap");
                map = new Microsoft.Maps.Map(mapDiv, mapOptions);
                setLoc(7,80,12, 300,500);            
            catch (e) {
                var md = new Windows.UI.Popups.MessageDialog(e.message);
        //add pushpin and center, zoom map//////////////
        function addPushPin(location) {
            var pushpin = new Microsoft.Maps.Pushpin(location, null);
        function setLoc(la, lo, zoom, w, h) {
            var geolocator = new Windows.Devices.Geolocation.Geolocator();
            var elem = document.getElementById("testmap");//use map div id as testmap
            elem.style.width = w + "px";
            elem.style.height = h + "px";
            geolocator.getGeopositionAsync().then(function (loc) {
                var mapCenter = map.getCenter();
                mapCenter.latitude = la;
                mapCenter.longitude = lo;
                map.setView({ center: mapCenter, zoom: zoom });

    Tuesday, May 14, 2013 6:19 AM


  • You probably don't want to put your map on a flyout if you intend the user to interact with it significantly. Per the  Guidelines and checklist for Flyouts:
    If an experience is one that requires prolonged interaction, multiple screens, or lots of UI, then you should integrate the UI into the canvas of the app.

    See Laying out your UI for other suggestions for different scenarios.

    Is the behavior you see unique to using the map control? If so, I'd check in the Bing Maps for Windows Store apps forum to see if this is a known scenario. Flyouts are designed to dismiss when the user clicks off of them, and it looks like the map uses an overlay div that isn't part of the flyout. This means that clicking on the map is not clicking on the Flyout and so dismisses the flyout. Jeff posted a solution in this thread.


    Tuesday, May 14, 2013 5:46 PM

All replies