LSN Rabbani LSN Rabbani - 7 months ago 20
PHP Question

Dynamic coordinates google maps wouldn't load

I'm trying to make google maps appears in my website, but the coordinates is displayed dynamically based on database. Here is my code

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


Load Maps API :

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


But the maps is wouldn't appears. Can anyone tell where is wrong from my code? Thanks before :)

Answer

Working version... all i changed is...

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

following is the working version... i hard coded your lat long(taken from your comment)

<!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>
Comments