none
close button is not working in bing map RRS feed

  • Question

  • HI 

    Can you suggest why  info box is not close after click on close button , Actually closeInfobox function call but info box is not close , can you suggest what is the missing in code ? 

        var infobox;

        var pushpinFrameHTML = '<div class="infobox" style="pointer-events:auto;"><a class="infobox_close" href="javascript:closeInfobox();"><img src="Content/images/close.png"/></a><div class="infobox_content">{content}</div>';
        pushpinFrameHTML += '</div><div class="infobox_pointer"><img src="Content/images/pointer_shadow.png"></div>';

        //google.load("visualization", "1", { packages: ["corechart"] });


        function ClusteringMap() {
            google.charts.load('current', { 'packages': ['corechart'] });
            var PushpinsCollection = [];
            var map = new Microsoft.Maps.Map(document.getElementById('ClustringMap'), {
                credentials: apiKey,
            });
            infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), {
                visible: false
            });
            //Assign the infobox to a map instance.
            infobox.setMap(map);
            $.ajax({
                type: "POST",
                url: "MapService.asmx/GetAssestLocation",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var data = JSON.parse(data.d);
                    console.log(data);
                    for (i = 0; i < data.length; i++) {
                        if (data[i].Latitude != null && data[i].Longitude != null) {
                            console.log(data[i].AlertStatus);

                            if (data[i].AlertStatus == "NEW") {
                                var pushpinOptions = { icon: '../Content/images/red_pin.png', height: 18, width: 20, anchor: new Microsoft.Maps.Point(13, 26) };
                            }
                            else if (data[i].AlertStatus == "ACTIONED") {
                                var pushpinOptions = { icon: '../Content/images/orange_pin.png', height: 18, width: 20, anchor: new Microsoft.Maps.Point(13, 26) };
                            }
                            else {
                                var pushpinOptions = { icon: '../Content/images/green_pin.png', height: 18, width: 20, anchor: new Microsoft.Maps.Point(13, 26) };
                            }

                            var latLon = new Microsoft.Maps.Location(data[i].Latitude, data[i].Longitude);

                            var pin = new Microsoft.Maps.Pushpin(latLon, pushpinOptions);
                            pin.metadata = {
                                title: '',
                                description: '<div class="tab-content" style="padding-top: 20px;height:90px;">' +
                            '<div  class="tab-pane data1 Home1 active" id="tab1">' +
                                      "<i><b>Manufacturer Name</b> =  " + data[i].ManufactuererName + " </i>" +
                                 "<br/><i><b>Asset No</b> =  " + data[i].AssetNumber + " </i>" +
                                 "<br/><i><b>Description </b> = " + data[i].FullDescription + "  </i>" +
                            '</div>' +
                            '<div class="tab-pane data2 Home2" id="tab2">' +
                                '<div id="chart_div"></div>' +
                            '</div>' +
                            '<div  class="tab-pane data3 Home3" id="tab3">' +
                                 'Control' +
                            '</div>' +
                           '</div>' +
                           '<hr style="margin:0px !important">' +
                           '<ul class="nav nav-tabs" style="border-bottom:0px !important;" >' +
                              '<li class="tabStyle"><a href="javascript:void(0);"  class="tabs" data="tab1" onclick="clickData(this)" >Information   </ a></    li>' +
                              '<li><a href="javascript:void(0);"  class="tabs" data="tab2" onclick="clickData(this)" >Monitor</a></li>' +
                             '<li><a href="javascript:void(0);" class="tabs" data="tab3"  onclick="clickData(this)">Control</a></li>' +
                          '</ul>'
                            };
                            Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
                          
                        }
                    }

                    Microsoft.Maps.loadModule('Microsoft.Maps.Clustering', function () {
                        var clusterLayer = new Microsoft.Maps.ClusterLayer(PushpinsCollection, {
                            gridSize: 100,
                            clusteredPinCallback: function (cluster) {
                                cluster.metadata = {
                                    title: 'Cluster',
                                    description: 'This is a cluster of ' + cluster.containedPushpins.length + ' pushpins.'
                                };
                                Microsoft.Maps.Events.addHandler(cluster, 'click', pushpinClicked);
                            }
                        });
                        map.layers.insert(clusterLayer);
                    });
                },
                error: function (r) {
                    alert(r.responseText);
                },
                failure: function (r) {
                    alert(r.responseText);
                }
            });
        }

         function closeInfobox() {
            infobox.setOptions({ visible: false });
            console.log(infobox);
        }

    function pushpinClicked(e) {
            //Make sure the infobox has metadata to display.
            if (e.target.metadata) {
                //Set the infobox options with the metadata of the pushpin.
                infobox.setOptions({
                    location: e.target.getLocation(),
                    title: e.target.metadata.title,
                    //description: e.target.metadata.description,
                    offset: new Microsoft.Maps.Point(-33, 2),
                    // visible: true,
                    // htmlContent: pushpinFrameHTML.replace('{content}', e.target.metadata.description)
                });

                infobox.setHtmlContent(pushpinFrameHTML.replace('{content}', e.target.metadata.description));
                google.charts.setOnLoadCallback(drawChart);
             }
        }


    • Edited by Mayur45 Saturday, May 7, 2016 1:27 PM
    Saturday, May 7, 2016 1:26 PM

Answers

All replies