1

I'm trying to display the all trajectory location on Google map along with dummy location. I have tried to display dummy locations with sample location and it works fine, but when I try to connect to database to display all trajectory its not showing anything just map without locations. I need to do to display markers of real locations from the database and the dummy location with different color markers.

suppose db is:

CREATE TABLE `position` (
  `id` int(4) NOT NULL,
  `lat` float(10,6) DEFAULT NULL,
  `lng` float(10,6) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

and php connect to db code is:

<?php

$username="root";
$password="test";
$database="location";
$dbserver = "localhost";
// Opens a connection to a MySQL server
$connection=mysql_connect ($dbserver, $username, $password);
if (!$connection) {
    die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
    die ('Can\'t use db : ' . mysql_error());
}

$query = mysql_query("select id,lat,lng FROM position" )or die(mysql_error());
while($row = mysql_fetch_array($query))
{
  $num= $row['id'];
  $lat1 = $row['lat '];
  $lon = $row['lng '];



  echo("($lat1, $lon);\n");

}

?>

and the code for display the map in php is :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Multiple Markers Google Maps</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkklwnMNr1kHCH7vgNeLAusVuf9yKM-Jk&v=3.11&sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
        // check DOM Ready
        $(document).ready(function() {
            // execute
            (function() {
                // map options
                var options = {
                    zoom: 35,
                    center: new google.maps.LatLng(40.744656, -74.005966), // centered US
                    mapTypeId: google.maps.MapTypeId.TERRAIN,
                    mapTypeControl: false
                };

                // init map
                var map = new google.maps.Map(document.getElementById('map_canvas'), options);

                // NY and CA sample Lat / Lng

                var lat= lat1;
                var long=lon ;
                for (var j = 0; j < num ; j++) {
                var southWest = new google.maps.LatLng(lat,long );

                        var r = 0.00007 // = 100 meters
                        , y0 = lat
                        , x0 = long
                        , u = Math.random()
                        , v = Math.random()
                        , w = r * Math.sqrt(u)
                        , t = 2 * Math.PI * v
                        , x = w * Math.cos(t)
                        , y1 = w * Math.sin(t)
                        , x1 = x / Math.cos(y0)

                        newY = y0 + y1
                        newX = x0 + x1

                // set multiple marker
                for (var i = 0; i < 20; i++){
                    // init markers
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(newY, newX ),
                        map: map,
                        title: 'Click Me ' + i
                     });

                    // process multiple info windows
                    (function(marker, i) {
                        // add click event
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow = new google.maps.InfoWindow({
                                content: 'Hello, World!!'
                            });
                            infowindow.open(map, marker);
                        });
                    })(marker, i);
                } }
            })();
        });
        </script>
    </head>
    <body>
        <div id="map_canvas" style="width: 800px; height:500px;"></div>
    </body>
</html>

I have trying to use MySQLi, and POD for connections but hopeless nothing display , even when I try to test to display lat/long from database I can see the data. I have already posted the same question in Stack Overflow but I didn't get any solution of my problem, so I hope I can find answer here.

  • Welcome to GIS SE. As a new user, please take the Tour. GIS SE would seem to be a better place to post your question, but I suspect you'll have the same no-Answer experience as SO if you don't post more details about what is actually occurring. As currently phrased, it's difficult to determine what you're looking to achieve and what you're actually getting. – Vince Aug 31 at 11:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.