Javascript 谷歌地图信息盒图像弹出到另一个带有图像库的信息盒
所以我有这个位置，我有图像。我有大约15张图片，我希望在信息窗口中只有4张图片，然后你可以点击这些图片，它会初始化一个弹出的画廊滑块。单击图像时，它当前不执行任何操作。我还有另外两个地方将有非常相似的设置Javascript 谷歌地图信息盒图像弹出到另一个带有图像库的信息盒,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,所以我有这个位置，我有图像。我有大约15张图片，我希望在信息窗口中只有4张图片，然后你可以点击这些图片，它会初始化一个弹出的画廊滑块。单击图像时，它当前不执行任何操作。我还有另外两个地方将有非常相似的设置 var locations = [ ['<div class="header">Lower</div><img id="myImg" src="1.png" alt="Snow"
var locations = [
['<div class="header">Lower</div><img id="myImg" src="1.png" alt="Snow" style="width:100%;max-width:300px"><div id="myModal" class="modal"><span class="close">×</span><img class="modal-content" id="img01"><div id="caption"></div>', 37.77, -122.43, 4],
];
function initMap() {
var map= new google.maps.Map(
document.getElementById('map'), {
zoom: 14,
center: { lat:37.78, lng:-122.44 }
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
};
})(marker, i));
markers.push(marker);
}
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
}
var位置=[
['Lower×；元素，用于关闭模式
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
}
<html>
<head>
<title>Vigor Locations</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#content {
text-align: center;
display: block;
position: absolute;
bottom: -8px;
left: -20px;
background-color: white;
z-index: 10001;
}
.header {
padding-right:2vw;
font-weight: 600;
font-size:26px;
padding-bottom:15px;
font-family:"IMB Plex Sans", sans-serif;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<div id="map"></div>
<!--
<script>
</script>
-->
<script type="text/javascript" src="map_custom_2.js"></script>
<!-- NOTE TO SELF: REVOKE API KEY AFTER ASSIGNMENT -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQfkiMFrFWpGHmP7YMFtlfQM6YEDqslNU&callback=initMap"
async defer></script>
</body>
</html>
活力地点
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}
#内容{
文本对齐：居中；
显示：块；
位置：绝对位置；
底部：-8px；
左：-20px；
背景色：白色；
z指数：10001；
}
.标题{
右：2vw；
字号：600；
字号：26px；
垫底：15px；
字体系列：“IMB Plex Sans”，无衬线；
}
#myImg{
边界半径：5px；
光标：指针；
过渡：0.3s；
}
#myImg:hover{opacity:0.7；}
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.9）；/*黑色w/不透明度*/
}
/*模态内容（图像）*/
.模态内容{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
}
/*模态图像标题（图像文本）-与图像宽度相同*/
#标题{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
文本对齐：居中；
颜色：#ccc；
填充：10px0；
高度：150像素；
}
/*添加动画-在模式中缩放*/
.模式内容#标题{
动画名称：缩放；
动画持续时间：0.6s；
}
@关键帧缩放{
来自{transform:scale（0）}
到{变换：比例（1）}
}
/*关闭按钮*/
.结束{
位置：绝对位置；
顶部：15px；
右：35px；
颜色：#f1f1；
字体大小：40px；
字体大小：粗体；
过渡：0.3s；
}
.关闭：悬停，
.结束：聚焦{
颜色：#bbb；
文字装饰：无；
光标：指针；
}
/*较小屏幕上的100%图像宽度*/
@仅介质屏幕和（最大宽度：700px）{
.模态内容{
宽度：100%；
}
}
当前问题：单击图像时，什么也没有发生。您的问题似乎是，在打开信息窗口之前，信息窗口中的HTML元素在DOM中不可用。您的代码试图在它们存在于DOM中之前访问它们，这会导致javascript错误：
类型错误：无法设置属性“onclick”'为空domreadygoogle.maps.event.addListener(infowindow, 'domready', function() {
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
})
活力地点