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);
}
}
