动态坐标谷歌地图不会';t负载


Dynamic coordinates google maps wouldn't load

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

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);

加载映射API:

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

但是地图不会出现。有人能从我的代码中判断出哪里出了问题吗?感谢之前:)

工作版本。。。我所改变的只是…

<?=$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>