在信息窗口中显示HTML内容和图表

Question

我正在使用google maps api和google charts，我希望在我的地图上有标记，以显示不同的信息和不同标记的图形。我想显示一些HTML内容，并在该内容下方显示图形。

但是，当我在infoWindow.setContent(contentString + node);中设置html内容和图节点时，它将在其下方显示html内容和[object HTMLDivElement]而不是图，但是如果我仅在infoWindow.setContent(node);中设置图节点，则它将显示图在infowindow中，但是我想在infowindow中同时包含html内容和图形。我该怎么办？

这是我的jsfiddle

代码段：

var contentString = '<div id="content">' +
  '<div id="siteNotice">' +
  '</div>' +
  '<p><center><h1 id="firstHeading" class="firstHeading">Amol shah</h1></center></p>' +
  '<p><center><h3>12324 - TM</h3></center></p>' +
  '<div id="bodyContent">' +
  '<p><center><b>Reporting : </b></center>' +
  '<center><b>ABM</b>: Jignesh Mehta </center>' +
  '<center><b>RBM</b>: Sunil boricha </center>' +
  '<center><b>ZM</b>: sachin pawar </center> </p>' +
  '<p><center><b>KPI : </b></center>' +
  '</div>' +
  '</div>';

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 node = document.createElement('div'),
    infoWindow = new google.maps.InfoWindow(),
    chart = new google.visualization.PieChart(node);

  chart.draw(data, options);
  infoWindow.setContent(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.load('visualization', '1.0', {
  'packages': ['corechart']
});

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

<div id="map_canvas"></div>
<script src="https://www.google.com/jsapi"></script>
<script asynch defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize"></script>

如何在信息窗口中显示内容和图形？

Answer 1

InfoWindow content可以是 字符串或HTML节点。

来自the documentation：

  

内容

  类型：字符串|节点
  要在信息窗口中显示的内容。这可以是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

proof of concept fiddle

代码段：

var contentString = '<div id="content">' +
  '<div id="siteNotice">' +
  '</div>' +
  '<p><center><h1 id="firstHeading" class="firstHeading">Amol shah</h1></center></p>' +
  '<p><center><h3>12324 - TM</h3></center></p>' +
  '<div id="bodyContent">' +
  '<p><center><b>Reporting : </b></center>' +
  '<center><b>ABM</b>: Jignesh Mehta </center>' +
  '<center><b>RBM</b>: Sunil boricha </center>' +
  '<center><b>ZM</b>: sachin pawar </center> </p>' +
  '<p><center><b>KPI : </b></center>' +
  '</div>' +
  '</div>';

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

<div id="map_canvas"></div>
<script src="https://www.google.com/jsapi"></script>
<script asynch defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize"></script>