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