javascript - データベースからデータを取得した後、Googleマップにマーカーを表示する

原文 javascript php google-maps google-maps-api-3 phpmyadmin

キーワード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>


地図は表示されますが、マーカーは表示されません。どんな助けにも感謝します
答え
奇妙な答えかもしれませんが、コードは機能するはずです。
しかし、データベースで緯度と経度を混在させても、マーカーは表示されますが、世界の別の場所に表示されるため、表示されません。
私が間違っている場合は、phpスクリプトからのjson応答の構造を投稿してください
関連記事

javascript - アンカーされたスムーズスクロールスクリプトのジャンプ

javascript - ion-nav-buttons内の戻るボタン

javascript - iframeがロードイベントを2回実行しないようにするにはどうすればよいですか?

javascript - 親ウィンドウに変数を渡す

javascript - サブグループを作成するドロップダウンチェックリスト

javascript - ハイチャート:凡例にプロットラインを追加します

javascript - 画像の寸法は本当に必要ですか?

javascript - Angular JSでiframe内のデータバインディング値を取得する

javascript - Meteor:セクション内のチェックされたボックスの数に基づいて数値を設定する方法

javascript - コルドバAndroidアプリのコンテンツを保護する