html只加载当前屏幕内容,在信息窗口中显示 html 内容和图表

信息窗口的内容可以是任何字符串或HTML节点。

从文档：content

类型： 字符串|节点

要在信息窗口中显示的内容。这可以是 HTML 元素、纯文本字符串或包含 HTML 的字符串。InfoWindow 将根据内容调整大小。要为内容设置显式大小，请将内容设置为具有该大小的 HTML 元素。

要解决您的问题，请创建一个 HTML 节点以添加到同时包含字符串内容和图表的 InfoWindow 内容，并将其添加为节点：

var infoWindowNode = document.createElement('div'); // main containing node for InfoWindow

var node        = document.createElement('div');    // for chart

var textNode = document.createElement('div');       // for "string content"

textNode.innerHTML = contentString;

infoWindowNode.appendChild(textNode);               // append "string content"

infoWindowNode.appendChild(node);                   // append chart

var infoWindow  = new google.maps.InfoWindow();

var chart       = new google.visualization.PieChart(node);

chart.draw(data, options);

infoWindow.setContent(infoWindowNode); // add node to InfoWIndow

代码片段：

var contentString = '

' +

'

' +

'

' +

'

Amol shah

' +

'

12324 - TM

' +

'

' +

'

Reporting : ' +

'

ABM: Jignesh Mehta ' +

'

RBM: Sunil boricha ' +

'

ZM: sachin pawar ' +

'

KPI : ' +

'

' +

'

';

function drawChart(marker) {

// Create the data table.

var data = new google.visualization.DataTable();

data.addColumn('string', 'Topping');

data.addColumn('number', 'Slices');

data.addRows([

['Mushrooms', 3],

['Onions', 1],

['Olives', 1],

['Zucchini', 1],

['Pepperoni', 2]

]);

// Set chart options

var options = {

'title': 'Pizza sold @ ' +

marker.getPosition().toString(),

'width': 300,

'height': 150

};

var infoWindowNode = document.createElement('div');

var node = document.createElement('div');

var textNode = document.createElement('div');

textNode.innerHTML = contentString;

infoWindowNode.appendChild(textNode);

infoWindowNode.appendChild(node);

var infoWindow = new google.maps.InfoWindow();

var chart = new google.visualization.PieChart(node);

chart.draw(data, options);

infoWindow.setContent(infoWindowNode /*contentString + node */ );

infoWindow.open(marker.getMap(), marker);

}

function initialize() {

var mapOptions = {

center: new google.maps.LatLng(-33.891044, 151.275537),

zoom: 10,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"),

mapOptions);

var marker1 = new google.maps.Marker({

position: mapOptions.center,

map: map

});

google.maps.event.addListener(marker1, 'click', function() {

drawChart(this);

});

google.maps.event.trigger(marker1, 'click');

}

google.load('visualization', '1.0', {

'packages': ['corechart']

});

html,

body,

#map_canvas {

height: 100%;

width: 100%;

padding: 0;

margin: 0;

}