none
Close Button Not Working Infobox cusom Bing Maps v8 RRS feed

  • Question

  • i'm try create custom infobox with close button in Bing Maps.

    How can a function set on an element in a custom infobox? Putting an onclick event on a tag in the HTML does not work. And does the technique of using href="javascript:closedInfoBox();" does not work.

    browser show error when using href="javascript:closedInfoBox();" :

    Uncaught ReferenceError: closedInfoBox is not defined
        at <anonymous>:1:1

    and using onclick="closedInfoBox()" :

    VM16301 Map:1 Uncaught ReferenceError: closedInfoBox is not defined
        at HTMLAnchorElement.onclick (VM16301 Map:1)

    var infobox;
            function closedInfoBox(){
                infobox.setOptions({ visible: false });
            }
    	function displayInfobox(e) {
    	var description = '<div class="customInfobox">'+
    			'<div class="panel panel-primary">' +
    			'<div class="panel-heading">' +
    			'<span class="glyphicon glyphicon-comment"></span> Comments' +
    			'<div class="btn-group pull-right">'+
    			'<a href="javascript:closedInfoBox();" class="btn btn-default btn-xs">'+
    			'<span class="fa fa-times"></span></a>'+
    			'</div>'+
    			'</div>' +
    			'<div class="panel-body">' +
    			'content something....'+
    			'</div>' +
    			'</div>' +
    			'</div>';
    			
    			infobox.setOptions({
    				visible: true,
    				offset: new Microsoft.Maps.Point(-100, 0),
    				htmlContent: description,
    				width: 400,
    				zIndex: 0
    			});
    		}
            function loadMap() {
                var map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
                    mapTypeId: Microsoft.Maps.MapTypeId.road,
                    center: new Microsoft.Maps.Location({{ coords["lat"] }}, {{ coords["lng"] }}),
                    zoom: 9
                });
                var center = map.getCenter();
                var pushpin = new Microsoft.Maps.Pushpin( new Microsoft.Maps.Location({{ coords["lat"] }}, {{ coords["lng"] }}), { icon: "{{ url_for("static", filename="img/blue24.png") }}",
                        anchor: new Microsoft.Maps.Point(12, 21) });
    					
    			var center = map.getCenter();
    			
    			var infoboxOptions = {
                                visible: false
                            };
    			infobox = new Microsoft.Maps.Infobox(center,infoBoxOptions);
    			
    			Microsoft.Maps.Events.addHandler(pushpin, 'click', displayInfobox);
    			Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', closedInfoBox);
    			
                infobox.setMap(map);
                map.entities.push(pushpin);
            }


    Please us support me this issue?







    • Edited by longTD3 Thursday, January 19, 2017 2:24 AM
    Wednesday, January 18, 2017 3:29 AM

Answers

  • There is a typo in your infobox html. The closeInfoBox has a capital B in most of your code, but a small b in your infobox html.

    [Blog] [twitter] [LinkedIn]

    Wednesday, January 18, 2017 5:18 AM
  • The code you are using is the correct method for creating a close button in a custom HTML content for an infobox. You just had a typeo in the function name, so clicking on your close button didn't work as it was trying to call a function that didn't exist.

    [Blog] [twitter] [LinkedIn]

    Thursday, January 19, 2017 5:58 PM

All replies

  • There is a typo in your infobox html. The closeInfoBox has a capital B in most of your code, but a small b in your infobox html.

    [Blog] [twitter] [LinkedIn]

    Wednesday, January 18, 2017 5:18 AM
  • Thanks u support.

    I have edited it. but it's not the cause of the error. The problem is how to create close button in htmlContent infoBox.

    If you know can you help me?

    Thursday, January 19, 2017 2:19 AM
  • The code you are using is the correct method for creating a close button in a custom HTML content for an infobox. You just had a typeo in the function name, so clicking on your close button didn't work as it was trying to call a function that didn't exist.

    [Blog] [twitter] [LinkedIn]

    Thursday, January 19, 2017 5:58 PM