데이터베이스에서 데이터를 가져온 후 google map에 마커를 표시합니다.

Question

키워드 fname을 기준으로 데이터베이스에서 검색을 수행하는 스크립트 (get_search_data.php)가 있습니다. 나는 검색 결과에 따라 마커와 팝업 창과 함께 위치가지도 (display_map.php)에 표시되도록해야합니다. features_for_office

id fname co_address_line1 co_address_line2 lat lon 

get_search_data.php

<?php 
    require 'config.php'; 

    try { 
     $db = new PDO($dsn, $username, $password); 

     $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 

     $fname = $_POST['fname'];  

     $sth = "SELECT * FROM features_for_office WHERE fname LIKE :fname "; 

     $stmt = $db->prepare($sth); 
     $stmt->bindValue(':fname', '%' . $fname . '%', PDO::PARAM_STR); 
     $stmt->execute(); 

     $locations = $stmt->fetchAll(); 
     echo json_encode($locations); 

    } catch (Exception $e) { 
     echo $e->getMessage(); 
    } 
?> 

<script src="jquery-1.11.1.js"></script> 


<script> 
$(document).ready(function(){ 
    $('#drop2').on('change',function(){ 
     //var fname = $(this).val(); 
     var fname = $(this).find('option:selected').text(); 
     // rename your file which include $fname with get_search_data.php 
     if(fname !== ""){ 
      $.post('display_map.php',{fname: fname},function(data){ 
      $('.showsearch').html(data); 
      }); 
      } 
    }); 
}); 
</script> 

display_map.php

<style type="text/css"> 
    #main { padding-right: 15px; } 
    .infoWindow { width: 220px; } 
</style> 

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

    <script> 
     function makeRequest(url, callback) 
      { 
       var request; 
       if (window.XMLHttpRequest) 
        { 
         request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari 
        } 
       else 
        { 
         request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5 
        } 
       request.onreadystatechange = function() 
        { 
         if (request.readyState == 4 && request.status == 200) 
          { 
           callback(request); 
          } 
        } 
       request.open("GET", url, true); 
       request.send(); 
      } 

      var map; 

      // Ban Jelačić Square - City Center 
      var center = new google.maps.LatLng(21.0000, 78.0000); 

      var geocoder = new google.maps.Geocoder(); 
      var infowindow = new google.maps.InfoWindow(); 

      function init() 
       { 
        var mapOptions = 
         { 
          zoom: 6, 
          center: center, 
          mapTypeId: google.maps.MapTypeId.ROADMAP 
         } 

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
        makeRequest('get_search_data.php', function(data) 
         { 
          var data = JSON.parse(data.responseText); 
          for (var i = 0; i < data.length; i++) 
           { 
            displayLocation(data[i]); 
           } 
         }); 
       } 
      function displayLocation(location) 
       { 
        var content = '<div class="infoWindow"><strong>' + location.fname + '</strong>' 
        + '<br/>'  + location.co_address_line1 
        + '<br/>'  + location.co_address_line2 + '</div>'; 

        if (parseInt(location.lat) == 0) 
         { 
          geocoder.geocode({ 'address': location.co_address_line1 }, function(results, status) 
           { 
            if (status == google.maps.GeocoderStatus.OK) 
             { 
              var marker = new google.maps.Marker 
               ({ 
                map: map, 
                position: results[0].geometry.location, 
                title: location.name 
               }); 

              google.maps.event.addListener(marker, 'click', function() 
               { 
                infowindow.setContent(content); 
                infowindow.open(map,marker); 
               }); 
             } 
           }); 
         } 
        else 
         { 
          var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lon)); 
          var marker = new google.maps.Marker 
           ({ 
            map: map, 
            position: position, 
            title: location.name 
           }); 

          google.maps.event.addListener(marker, 'click', function() 
           { 
            infowindow.setContent(content); 
            infowindow.open(map,marker); 
           }); 
         } 
       } 
     </script> 
</head> 
<body onload="init();">  
    <section id="main"> 
     <div id="map_canvas" style="width: 70%; height: 500px;"></div> 
    </section> 
</body> 

지도가 표시됩니다하지만 마커가 표시지고 있지 않지만위한

테이블보기. 어떤 도움을 주시면 감사하겠습니다.

Answer 1

이상한 대답 일지 모르지만 코드가 작동해야합니다. 그러나 데이터베이스에서 위도와 경도를 혼합하면 표식이 계속 표시되지만 다른 부분에 표시되기 때문에 표시되지 않습니다. 내가 틀렸다면 PHP 스크립트의 json 응답 구조를 게시하십시오.