如何在彈出窗口或燈箱中插入谷歌地圖？
[英]how to insert google map in popup or lightbox?
問題描述
我想問問！ 我設計的應用程序，但在將其顯示在地圖不能滿足“DIV ID =” wrap_peta“”就像在一個彈出窗口或燈箱一個谷歌地圖有問題的畫面 。 問題不是由加載映射失敗引起的
感謝所有人，我在腳本中找到了所有錯誤的幫助
<!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>
2 個解決方案
解決方案1
1 已采納 2013-05-29 08:18:07
看看這個問題 。
它具有正確的谷歌地圖彈出窗口代碼。
我看了3dgoo告訴我們的第一個鏈接。 當人們在這個網站上使用它時，它的工作效果很好： Pallas restaurant。 鏈接位於谷歌地圖彈出窗口的左下角。
- - - - - - - -編輯 - - - - - - - -
我沒有告訴網站代碼所在的位置，但是你走了！
解決方案2
1 2013-05-29 11:47:08
在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);
}
這會奏效。
燈箱內的谷歌地圖
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.