0

I have a gps sending data to mysql db, but am having hard time ploting the values on google map. My javascript skills are not very good, pls help...

javascript code

<?php 
    $server = "localhost";
    $username = "root";
    $database = "";
    $password = "";
    $conn = mysql_connect($server,$username,$password);
    mysql_select_db($database) or die("Unable to select database");
    ?>

    <html>
    <head>
    <script type='text/javascript' src='jquery-1.6.2.min.js'></script>
    <script type='text/javascript' src='jquery-ui-1.8.14.custom.min.js'></script>
    <style>

        BODY {font-family : Verdana,Arial,Helvetica,sans-serif; color: #000000; font-size : 13px ; }

        #map_canvas { width:70%; height: 70%; z-index: 0; }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" /></script>
    <script type='text/javascript'>

    //This javascript will load when the page loads.
    jQuery(document).ready( function($){

            //Initialize the Google Maps
            var geocoder;
            var map;
            var markersArray = [];
            var infos = [];

            geocoder = new google.maps.Geocoder();
            var myOptions = {
                  zoom: 100,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                }
            //Load the Map into the map_canvas div
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            //Initialize a variable that the auto-size the map to whatever you are plotting
            var bounds = new google.maps.LatLngBounds();
            //Initialize the encoded string       
            var encodedString;
            //Initialize the array that will hold the contents of the split string
            var stringArray = [];
            //Get the value of the encoded string from the hidden input
            encodedString = document.getElementById("encodedString").value;
            //Split the encoded string into an array the separates each location
            stringArray = encodedString.split("****");

            var x;
            for (x = 0; x < stringArray.length; x = x + 1)
            {
                var addressDetails = [];
                var marker;
                //Separate each field
                addressDetails = stringArray[x].split("&&&");
                //Load the lat, long data
                var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
                //Create a new marker and info window
                marker = new google.maps.Marker({
                    map: map,
                    position: lat,
                    //Content is what will show up in the info window
                    content: addressDetails[0]
                });
                //Pushing the markers into an array so that it's easier to manage them
                markersArray.push(marker);
                google.maps.event.addListener( marker, 'click', function () {
                    closeInfos();
                    var info = new google.maps.InfoWindow({content: this.content});
                    //On click the map will load the info window
                    info.open(map,this);
                    infos[0]=info;
                });
               //Extends the boundaries of the map to include this new location
               bounds.extend(lat);
            }
            //Takes all the lat, longs in the bounds variable and autosizes the map
            map.fitBounds(bounds);

            //Manages the info windows
            function closeInfos(){
           if(infos.length > 0){
              infos[0].set("marker",null);
              infos[0].close();
              infos.length = 0;
           }
            }

    });
    </script>

php code

         //Initialize your first couple variables
        $encodedString = ""; //This is the string that will hold all your location data
        $x = 0; //This is a trigger to keep the string tidy


                    //Now we do a simple query to the database
              function dec($dec)

                {
                    $dir=substr($dec, -1);

                    $deg=substr($dec, 0, 2);
                    $mins=substr($dec, 2);

                    $min = $mins / 60;

                    $map=$deg+$min;

                    if ($dir == "S" || $dir == "W") {
                        $map = "-".$map;
                    } // Don't do anything for N or E

                    return round($map, 7);
}
        //Now we do a simple query to the database
        $result="SELECT * FROM `poi`";
        $results = mysql_query($result);
        //Multiple rows are returned
        while ($row = mysql_fetch_array($results))
        {

            //This is to keep an empty first or last line from forming, when the string is split
            if ( $x == 0 )
            {
                 $separator = "";
            }
            else
            {
                 //Each row in the database is separated in the string by four *'s
                 $separator = "****";
            }
                            $dec_lat=$row['lat'];
                            $dec_lon=$row['lon'];

                    //convert lat n lon
                            $lat=dec($dec_lat);

                            $lon=dec($dec_lon);

                            echo$lat.",".$lon;

            //Saving to the String, each variable is separated by three &'s
            $encodedString = $encodedString.$separator.
            "<p class='content'><b>Lat:</b> ".$row['lat'].
            "<br><b>Long:</b> ".$row['lon'].
            "<br><b>Name: </b>".$row['name'].
            "<br><b>Address: </b>".$row['desc'].
            //"<br><b>Division: </b>".$row[5].
            "</p>&&&".$row['lat']."&&&".$row['lon'];
            $x = $x + 1;
        }

am at a lot as to how to get lat and lon values to show on map...

Edited by accra

2
Contributors
1
Reply
21
Views
3 Years
Discussion Span
Last Post by Masterblank
0

The best approach to work with dynamic google maps is by using json or xml to populate the map with markers. Both solutions are suitable for your needs.

Google publish a great tutorial with examples and code snippet that will help you a lot

Plus, if you wish to know more about how to store and retrieve marker positions (lat, lng) from a mysql DB, feel free to download and explore my phpGmap script here

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.