javascript 如何在弹出窗口或灯箱中插入谷歌地图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16808694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to insert google map in popup or lightbox?
提问by Adem Natural
I want to ask!
I'm designing an application, but there is a problem in inserting a google map in a popup or lightbox which display the map can not meet the "div id="wrap_peta"" like in the picture.
The problem is not caused by the failure loading map
我想问一下！我设计的应用程序，但在将其显示在地图不能满足“DIV ID =” wrap_peta“”就像在一个弹出窗口或灯箱一个谷歌地图有问题的画面。问题不是加载地图失败引起的
I asked for help from all of what's wrong in my script thanks fo everyone
我向我的脚本中的所有错误寻求帮助，谢谢大家
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/lightbox.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript">
function load_peta()
{
var semarang = new google.maps.LatLng(-7.201470266411334, 110.08918792956547);
var petaoption = {
zoom: 9,
center: semarang,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
peta = new google.maps.Map(document.getElementById("peta"),petaoption);
google.maps.event.addListener(peta,'click',function(event){
kasihtanda(event.latLng);
});
load_list_terminal('awal');
}
google.maps.event.addDomListener(window, 'load', load_peta);
</script>
<title>Untitled Document</title>
</head>
<body>
<!--Bagian Bar Navigasi Atas termasuk search -->
<div id="bar_atas">
<div style="margin:auto; margin-top:5px; padding:5px 5px 5px 5px; height:50px; width:90%;">
<h1>GIS Hubkominfo</h1>
</div>
</div>
<div>
<p><a onclick="show_lightbox()" href="javascript:void()">input terminal</a></p>
</div>
<div id="background" onclick="hide_lightbox()" class="bgdasar"></div>
<div id="popup" class="wraplightbox" style="margin:auto">
<p onclick="hide_lightbox()" style="cursor:pointer">tutup</p>
<div id="peta" style="height:300px; margin-bottom:10px; border:solid #999 2px;"></div>
</div>
</body>
</html>
回答by Ryan de Vries
Look at this question.
看看这个问题。
It has the right code for the popup of google maps.
它具有用于弹出谷歌地图的正确代码。
I took a look at the first link 3dgoo told us. It's working great as people are using it like on this website: Pallas restaurant.The link is at the bottom-left for the popup of google maps.
我查看了 3dgoo 告诉我们的第一个链接。人们在这个网站上使用它时效果很好：Pallas 餐厅。该链接位于左下角，用于弹出 google 地图。
---------------EDIT---------------
- - - - - - - -编辑 - - - - - - - -
I did not tell the site where the code belongs, but here you go!
我没有告诉该代码所属的站点，但是你去吧！
回答by lintu
Create the division for the map inside the initilaser of colorbox.
在 colorbox 的初始化器中为地图创建分区。
var link = document.getElementById("seeMap");
link.colorbox({
html: '<div id="MapPane" class="mapClass"></div>',
scrolling: false,
width: "1000px",
onComplete: function(){
loadMap();
}
})
function loadMap()
{
var map = new google.maps.Map(document.getElementById("MapPane"),mapoptions);
}
This will work.
这将起作用。
