2016-05-03 2 views
0

Я пытаюсь сделать карты google на моем веб-сайте, но координаты отображаются динамически на основе базы данных. Вот мой кодДинамические координаты google maps не загружались

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> 

Но карты не появятся. Может ли кто-нибудь сказать, где не так из моего кода? Благодаря, прежде чем :)

+1

какой карты;?> Содержит? –

+0

@DharaParmar координаты: -7.567472,110.796774 (например) – imbagila

+0

Я не могу найти какой-либо элемент с id maps-mata-lomba в вашем предоставленном html ... существует ли он в html? –

ответ

1

Рабочая версия ... все я изменил это ...

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

Ниже рабочая версия ... я жёстко ваш лат долго (из Вашего комментария)

<!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> 
+0

Работает отлично, большое спасибо !!! – imbagila

+0

Рад помочь вам ... :) – Abhishek

Смежные вопросы