0

I am prety new to google maps. I have successfully done my job of plotting a route according to the coordinates, But I get the coordinates on mouse click. It gets coordinates from user click, place a marker and extends the route. Now what i want to do is to replace this double click event with getting values from database. Here is my detailed code

CODE

//InitializeMap() function is used to initialize google map on page load.

function InitializeMap() {
    //DirectionsRenderer() is a used to render the direction
    _directionsRenderer = new google.maps.DirectionsRenderer();

    //Set the your own options for map.
    var myOptions = {
        zoom: zoom_option,
        zoomControl: true,
        center: new google.maps.LatLng(30.3753, 69.3451),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

//Define the map.

map = new google.maps.Map(document.getElementById("dvMap"), myOptions);
    //Set the map for directionsRenderer
    _directionsRenderer.setMap(map);

    //Set different options for DirectionsRenderer mehtods.
    //draggable option will used to drag the route.
    _directionsRenderer.setOptions({
        draggable: false
    });

THIS IS THE PART WHICH I WANT TO REPLACE 

 //Add the doubel click event to map.
    google.maps.event.addListener(map, "dblclick", function(event) {
        var _currentPoints = event.latLng;
        _mapPoints.push(_currentPoints);
        LegPoints.push('');
        getRoutePointsAndWaypoints(_mapPoints);
    });

    /*continue*/

Here is something what i want to do

 if(checkbox is checked){
    getvehicleno;
send vehicleno and request php script(in php file) to execute query and get coordinates, and send these 
coordinates to client side i.e., map.js file.

I have searched alot on google maps, found some tutorials on google using ajax etc, but are very complex, if someone can atleast show me how to request php script to fetch data from database and then how to receive it? I am new to stack overflow, if my question is not well formatted or explained, please ask questions, i will try to answer.

SOLVED

Java Script

function get_coordinates(checkbox){
    var v_id=checkbox.id;
    if(checkbox.checked){
        var hr = new XMLHttpRequest();
        hr.open("POST", "fetch_coordinates.php", true);
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        hr.onreadystatechange = function() {
            if(hr.readyState == 4 && hr.status == 200) {
                var data = JSON.parse(hr.responseText);
                var lat=data.loc.lat;
                var lon=data.loc.lon;
                addmarker(lat,lon,v_id); //this method adds marker
            }
        }
         hr.send("id="+v_id);   
    }

PHP (fetch_coordinates.php)

<?php
header("Content-Type: application/json");
$vno=$_POST['id'];
require 'connection.php';
$res=  mysql_query("select lat,lang from location where v_no='$vno'");
while ($row = mysql_fetch_array($res)) {
    $lat=$row['lat'];
    $lon=$row['lang'];
}
$jsonData = '{ "loc":{ "lat":"'.$lat.'", "lon":"'.$lon.'" } }';
echo $jsonData;
?>
user3493077
  • 101
  • 1
  • 4
  • the question is tagged with "ajax", where is your ajax? – Dr.Molle Apr 03 '14 at 10:20
  • well i have searched for this problem on google, most of the tutorials and comments wer to use ajax, some were also iving complex codes which i was unbale to understand becuase i never studied ajax. I just tagged ajax for ajax developers to see and comment if the solution is through ajax, thanks! – user3493077 Apr 03 '14 at 10:23
  • i didn't know that only those tags are allowed which are includedin the code, i am new to stackoverflow – user3493077 Apr 03 '14 at 10:24
  • 1
    It's correct, AJAX is what you need. You better make yourself familiar with AJAX and ask a specific question when you have problems. – Dr.Molle Apr 03 '14 at 10:29
  • Sir! i tried to understand ajax, i have downloaded the tutorials form www.thenewboston.org, but i was unable to understand how the request is generated,,, – user3493077 Apr 03 '14 at 10:44
  • whats the purpose of url in xmlHttp.open() , how to ake a url in this purticular scenario!! – user3493077 Apr 03 '14 at 10:45
  • The URL is your data source. Ie a page that outputs your data in a readable format (XML or JSON). It can be a flat file, or a server-side generated output. You mentioned PHP. Have a look at [`json_encode`](http://www.php.net/manual/en/function.json-encode.php). In other words: query your database and output the results as JSON, use AJAX to retrieve the results on the js side (you would use your_page.php as the URL). – MrUpsidown Apr 03 '14 at 16:42

0 Answers0