打开Goog​​le地图上的表格Javascript

Question

因此，我正在使用Google Maps JavaScript Api，并且当前有一张填充了圆圈的地图。我希望能够点击一个圆圈并让它打开一张带有一些信息的表格，但我不确定如何做到这一点。我已经能够在圆上单击并让它使用该弹出打开一个信息框：

var contentString = city[0].toString() + ": " + city[1].toString() + " shooting(s)"; 
var infoWindow= new google.maps.InfoWindow({ 
    content: contentString 
    }); 

google.maps.event.addListener(cityCircle, 'click', function(ev){ 
    infoWindow.setPosition(cityCircle.getCenter()); 
    infoWindow.open(map); 
}); 
// }); 

} 

我不知道的是如何该信息框中以表格形式呈现。我试过这样的事情：

var contentString = "<table width="100%" border="1"> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td rowspan="2">&nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    </tr> 
</table>"; 

但是，这给了我错误：“意外的数字”。如果任何人可以提供一些帮助，将不胜感激！

Answer 1

你要注意你的引号（“），你有比你用来分隔字符串本身使用HTML字符串中不同的人

相关的问题：Replace double quote in javascript variable string

相反的：

var contentString = "<table width="100%" border="1"> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td rowspan="2">&nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    </tr> 
</table>"; 

一种选择是使用单引号和双引号的混合物，不跨多行的字符串分割：

var contentString = "<table width='100%' border='1'><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td rowspan='2'>&nbsp;</td></tr><tr><td>&nbsp;</td></tr></table>"; 

proof of concept fiddle

代码片段：

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var contentString = "<table width='100%' border='1'><tr><td>&nbsp;A</td><td>&nbsp;B</td></tr><tr><td>&nbsp;E</td><td rowspan='2'>&nbsp;C</td></tr><tr><td>&nbsp;D</td></tr></table>"; 
 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: contentString, 
 
    position: map.getCenter() 
 
    }); 
 
    infowindow.open(map); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>