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

Question

我正在制作 google 地图 api 和 google 图表，我希望在我的地图上有标记，为不同的标记显示不同的信息和图表。我想在该内容下方显示一些 html 内容和图表。

但是当我在 infoWindow.setContent(contentString + node); 中设置 html 内容和图形节点时，它会在其下方显示 html 内容和 [object HTMLDivElement] 而不是图形，但是如果我只设置图形节点在 infoWindow.setContent(node); 然后它在信息窗口中显示图形，但我想要在信息窗口中显示 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：

content

Type: string|Node
Content to display in the InfoWindow. This can be an HTML element, a plain-text string, or a string containing HTML. The InfoWindow will be sized according to the content. To set an explicit size for the content, set content to be a HTML element with that size.

要解决您的问题，请创建一个 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>

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

Display html content and chart in infowindow

javascript

google-maps

infowindow