display marker on google map after fetching data from database

Question

I have a script(get_search_data.php) that performs search from the database based on the keyword fname. i wish that according to the search result, locations should get displayed on the map (display_map.php) along with the marker and popup window for information.

table view for 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>

Although the map gets displayed but the markers are not getting displayed. would appreciate any help

Answer 1

It might be strange answer, but your code should work. But if you mix up lat and lon in your database markers would still display but you won't see them because they appear in another part of the world. If I am wrong please post the the structure of json response from php script