Using Geolocation to find store

Question

I have the following code below that i picked up of the internet as an example. So what i need to do is display local car dealers using geolocation. The long and lat are stored in a phpmyadmin database. I need this to be done using JSON. The outcome is to use the current location and then to display local car dealers withing that area, connecting to the database where the long and lat are stored. So it would display a marker with current location and several other markers displaying other car dealers.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
        <title>Target Store Locator</title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script src="https://raw.github.com/apigee/usergrid-javascript-sdk/0.9.10/usergrid.SDK.js"></script>
        <script type="text/javascript" src="cordova-2.2.0.js"></script>
    </head>

    <body>
        <!-- This is the main page for the app -->
        <div data-role="page" id="results">
            <div data-theme="c" data-role="header">
                <h3>
                    Results
                </h3>
            </div>
            <img id="map" src="https://maps.googleapis.com/maps/api/staticmap?scale=2&center=Palo Alto, CA&amp;zoom=14&amp;size=400x200&amp;markers=Palo Alto, CA&amp;sensor=false" height="200" style="display: block; margin-left: auto; margin-right: auto">
            <div data-role="content">
                <ul id="list" data-role="listview" data-divider-theme="c" data-inset="false" data-count-theme="b">
                    <li data-role="list-divider" role="heading">Nearest Stores</li>
                </ul>
            </div>
        </div>
        <script>
            //Initialize the Usergrid SDK
            Usergrid.ApiClient.init('usergrid', 'tests');

            $(function(){
                if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
                    // Wait for the device to be ready to grab the geoloc
                    // Helps avoid the unsightly iOS authorization message
                    // http://stackoverflow.com/questions/1673579/location-permission-alert-on-iphone-with-phonegap 
                    document.addEventListener("deviceready", onDeviceReady, false);
                } else {
                    onDeviceReady(); //this is the browser
                }
            })

            function onDeviceReady() {
                navigator.geolocation.getCurrentPosition(onGetLocationSuccess, onGetLocationError);     
            }

            // This updates the map, listing and store page
            // for every result
            function renderStore(store, label) {
                var coords = store.get('location').latitude+","+store.get('location').longitude;

                // Update the map
                var src =  $("#map").attr('src') + "&markers=color:blue%7Clabel:"+label+"%7C"+coords;

                // Add a list divider for the Pharmacy and SuperTarget results
                $("#map").attr('src', src);
                switch(label) {
                    case 'S':
                    $("#list").append('<li data-role="list-divider" role="heading">Nearest SuperTarget</li>');
                    break;
                    case 'P':
                    $("#list").append('<li data-role="list-divider" role="heading">Nearest Pharmacy</li>');
                    break;
                }
                // Append to the list of results
                $("#list").append('<li><a href="#page'+store.get('storeNumber')+'" data-role="button" data-transition="slide">'+store.get('name')+'</a><span class="ui-li-count ui-btn-corner-all">'+label+'</span></li>');

                // Necessary for the listview to render correctly
                $("#list").listview('refresh');

                $('body').append('<div data-role="page" id="page'+store.get('storeNumber')+'"><div data-theme="b" data-role="header" data-position="fixed"><h3>'+store.get('name')+'</h3><a data-role="button" data-rel="back" data-icon="arrow-l" data-iconpos="left"class="ui-btn-left">Results</a></div><img id="map" src="https://maps.googleapis.com/maps/api/staticmap?scale=2&center='+coords+'+&zoom=14&size='+window.innerWidth+'x200&markers='+coords+'&sensor=false" height="200"><div data-role="content"><div><p><b>Address</b><br/>'+store.get('location').displayAddress+'</p><p><b>Opening Hours</b><br/>'+store.get('hours').join('<br/>')+'</p></div></div></div>');
            }

            // Most of the magic happens here
            function onGetLocationSuccess(location) {
                // Extract the coordinates in a usable form
                var latlon = location.coords.latitude+","+location.coords.longitude;

                // Prepare the Google Maps marker and update the map
                var home = "color:orange%7C"+latlon;
                $("#map").attr('src', "https://maps.googleapis.com/maps/api/staticmap?scale=2&center="+latlon+"&zoom=10&size="+window.innerWidth+"x200&sensor=false&markers="+home);

                // Initialize a local “stores” object using the SDK
                var stores = new Usergrid.Collection('stores');

                // This query will return all stores within 15,000 meters of the current location
                stores.setQueryParams({"ql":"select * where location within 15000 of "+latlon});

                // Do the actual query and process the results
                stores.fetch( function(response) {

                        // Process the regular store
                        var count = 1;
                        while(stores.hasNextEntity()) {
                            renderStore(stores.getNextEntity(), count);
                            count++;
                        }

                        // Now let’s search for the nearest store with a Pharmacy
                        stores.setQueryParams({"ql":"location within 100000 of "+latlon+" and pharmacy = true", "limit":1});
                        stores.fetch( function(response) {
                            renderStore(stores.getNextEntity(), 'P');

                            // … And the nearest SuperTarget
                            stores.setQueryParams({"ql":"location within 100000 of "+latlon+" and supertarget = true", "limit":1});
                            stores.fetch( function(response) {
                                renderStore(stores.getNextEntity(), 'S')
                                });
                            });
                        });
            }

            function onGetLocationError() {
                alert("could not get your location");
            }

        </script>
    </body>
</html>

@davidstrachan, get the long and lat of local car dealers which are stored in the phpmyadmindatabase and display it on a map using JSON. — user2279531, Apr 15 '13 at 18:01

score 0 · Answer 1 · answered Apr 15 '13 at 18:20

Using PDO fetch your data using PDO::FETCH_OBJ.Then use json_encode to produce JSON

// Prepare statement
$stmt = $dbh->prepare("SELECT  colums FROM table ");
//Execute query
$stmt->setFetchMode(PDO::FETCH_OBJ);
$stmt->execute();
//Show the results  
while($obj = $stmt->fetch()) {  
    $arr[] = $obj;
}
echo '{"marker":'.json_encode($arr).'}';

Using Geolocation to find store

1 Answers1