Question

我正在尝试让谷歌地图出现在我的网站上，但坐标会根据数据库动态显示。这是我的代码

HTML：

<div class="panel panel-primary">
    <div class="panel-heading">
        Maps
    </div>
    <div class="panel-body" id="maps-area" style="height: 500px;" onLoad="loadMap(<?=$row->maps;?>)">
    </div>
</div>

JavaScript：

function loadMap(x)
{
    var mapOptions =
    {
        center: new google.maps.LatLng(x),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("maps-area"), mapOptions);
    var marker = new google.maps.Marker
    ({
        position: new google.maps.LatLng(x),
    });
    marker.setMap(map);
}
google.maps.event.addDomListener(window, "load", loadMap);

加载Maps API：

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>

但地图不会出现。谁能告诉我的代码哪里出错？在此之前谢谢：）

Answer 1

工作版......我改变了所有......

<?=$row->maps;?>// i guess this doesn't work as expected??

以下是工作版本...我硬编码你的lat long（取自你的评论）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<body>
    <script type="text/javascript">
        function loadMap() {
            var mapOptions = {
                center : new google.maps.LatLng(-7.567472,110.796774),
                zoom : 17,
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("maps-area"), mapOptions);
            var marker = new google.maps.Marker({
                position : new google.maps.LatLng(x),
            });
            marker.setMap(map);
        }
        google.maps.event.addDomListener(window, "load", loadMap);
    </script>
</body>
<div class="panel panel-primary">
    <div class="panel-heading">Maps</div>
    <div class="panel-body" id="maps-area" style="height: 500px;" onLoad="loadMap()"></div>
</div>
</html>

动态坐标谷歌地图无法加载

1 个答案: