Javascript Google MaPs API v3标记到地图画布中的lightbox
我正在建立我的个人网站，向潜在雇主展示我的编码示例组合。一个非常简单的项目是展示我所有旅行的方式。我想要一个静态的谷歌地图，在我访问过的台湾、日本、夏威夷、法国、美国许多城市的所有地方都有标记……等等 单击这些标记后，我希望在地图顶部显示一个弹出的覆盖框，覆盖地图的70%，居中，地图的外边缘变灰。单击灰色区域中的任意位置将关闭弹出覆盖。 这些弹出窗口将包含我旅行的照片，以及简短的引语、简介或轶事 这听起来很简单，但我似乎无法让弹出窗口覆盖按我想要的方式运行。 我在网上找到了很多关于如何添加这些标记并打开信息窗口的示例，但它们并没有完成我希望它们完成的任务： 1信息窗口在标记的顶部、左侧、右侧或底部显示为语音气球 这改变了我的地图 3我不知道如何在激活弹出叠加后灰显我的地图 有人能给我指出正确的方向吗？我应该仅仅使用CSS/Javascript/jQuery来实现这一点吗？谷歌地图API有什么我可以使用的吗？我有一些关于角度的基本知识，希望能学得更好。这里适用吗？感谢您的帮助Javascript Google MaPs API v3标记到地图画布中的lightbox,javascript,jquery,css,google-maps,google-maps-api-3,Javascript,Jquery,Css,Google Maps,Google Maps Api 3,我正在建立我的个人网站，向潜在雇主展示我的编码示例组合。一个非常简单的项目是展示我所有旅行的方式。我想要一个静态的谷歌地图，在我访问过的台湾、日本、夏威夷、法国、美国许多城市的所有地方都有标记……等等 单击这些标记后，我希望在地图顶部显示一个弹出的覆盖框，覆盖地图的70%，居中，地图的外边缘变灰。单击灰色区域中的任意位置将关闭弹出覆盖。 这些弹出窗口将包含我旅行的照片，以及简短的引语、简介或轶事 这听起来很简单，但我似乎无法让弹出窗口覆盖按我想要的方式运行。 我在网上找到了很多关于如何添加这些标
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>My Travels</title>
<style>
html, body, #map-canvas {
height: 375px;
width: 600px;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 1, // zoom level
center: new google.maps.LatLng(41,0) //center of map
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var taipeiContent = 'I Love Taipei!';
var parisContent = 'I Love Paris!';
var newyorkContent = 'I Love New York!';
var locations = [
['taipei', 25.0333, 121.6333, taipeiContent],
['paris', 48.8567, 2.3508, parisContent],
['newyork', 40.7127, 74.0059, newyorkContent],
];
//function setMarkers (map, locations) {
var marker, i;
var markers = new Array();
var infoWindow = new google.maps.InfoWindow({
maxWidth:300
});
for ( i=0; i<locations.length;i++ ) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][0],
});
markers.push(marker);
google.maps.event.addListener(marker,'click',(function(marker, i){
return function() {
infoWindow.setContent(locations[i][3]);
infoWindow.open(map,marker);
map.setCenter(marker.getPosition());
}
})(marker,i));
}
google.maps.event.addListener(map, "click", function() {infoWindow.close();});
//}
}
window.onload = initialize;
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
-编辑-我知道NY出现在吉尔吉斯斯坦，但现在这并不重要。你的意思是像@geocodezip那样，这不是我想要的，谢谢你的尝试。我要的是一张有记号的地图。单击标记后，地图上方会出现一个较小的框，居中，地图灰显。在较小的框中显示的是一个图像和一些关于我刚才单击的标记的文本。大多数应用程序都有直接位于标记上方的方框，我不知道如何使地图变灰。@geocodezip进一步挖掘后，我意识到我需要使用的术语是lightbox。我想点击一个标记来打开一个灯箱而不是一个信息窗口。