如何在弹出窗口或灯箱插入谷歌地图

how to insert google map in popup or lightbox?

本文关键字：插入 谷歌地图 窗口      更新时间：2023-09-26

我想问!我正在设计一个应用程序，但有一个问题，插入谷歌地图在弹出窗口或灯箱显示地图不能满足"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>

看这个问题。

它有正确的代码为谷歌地图的弹出。

我看了3dgoo告诉我们的第一个链接。它工作得很好，因为人们正在使用它，就像这个网站:帕拉斯餐厅。链接在左下角的谷歌地图的弹出。

--------------- 编辑 ---------------

我没有告诉网站代码属于哪里，但是给你!

在colorbox的initilaser中为地图创建分区

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);
}
相关文章：