将更新的lat＆lng google地图可拖动标记传递到另一个页面

I've got a Google Maps where users can click on the map to insert a marker with an infowindow form where they can edit and save data to the database. Its similar to this:

http://code.google.com/apis/maps/articles/phpsqlinfo_v3.html

but I've made my marker to be draggable. How do I pass the updated lat & lng to another PHP page to update the database?

Currently, I'm doing this:

function updateMarkerPosition(latLng) 
{
    document.getElementById('add_lat').value = latLng.lat();
    document.getElementById('add_lng').value = latLng.lng();
}   

function add_editable_mkr()
{
    google.maps.event.addListener(map, 'click', function(event)
    {
        var marker_drag = new google.maps.Marker(
        {
            position: event.latLng,
            draggable:true,
            map: map,
            icon: icon2
        });                     

        // Infowindow form
        var html =  '<div>'+
                    '<form name="add_data" action="phpinsert.php">'+
                            '<input type="text" name="add_lat" value=""/>'+
                            '<input type="text" name="add_lng" value=""/>'+         
                    '</form>'+
                    '</div>';                               

        var popup_form = new google.maps.InfoWindow
        ({      
            maxWidth:800
        });

        google.maps.event.addListener(marker_drag, "click", function() 
        {
            popup_form.setContent(html);                        
            popup_form.open(map, marker_drag);
        }); 

        google.maps.event.addListener(marker_drag, 'drag', function() 
        {
            updateMarkerPosition(marker_drag.getPosition());
        }); 

    }); 
}

function initialize() 
{
    map = new google.maps.Map(document.getElementById("map"), 
    {
      center: new google.maps.LatLng(1.364236,103.796082),  
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: 
        {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
        },
        navigationControl: true,
        navigationControlOptions: 
        {
            style: google.maps.NavigationControlStyle.LARGE
        }
    });


    add_editable_mkr(); 
}

But the values are passed over to my other page as empty values. Is there any other way to do this?

Thanks in advance!

Looks to me like your text inputs don't have an id attribute. So, you can either give them an id attribute or reference them by the form

Try this where you set your HTML and let me know how it goes:

var html = '<div>'+
           '<form name="add_data" action="phpinsert.php">'+
                '<input type="text" name="add_lat" id="add_lat" value=""/>'+
                '<input type="text" name="add_lng" id="add_lng" value=""/>'+         
            '</form>'+
            '</div>';

OK, figured it out. Google Maps doesn't just put the HTML on the document. I'm not sure what happens behind the scenes, but I think it clones the content somehow. There seems to be 2 input tags with the id of add_lat. So, you have to get the element by it's class name and update it that way. It's the second element in the document. If you use jQuery, you can easily update all elements that have a certain class name anywhere on the page.

Also, I found all kinds of weird things happen with the code you wrote. So, I quickly rewrote it to only have a single marker, and a single infowindow on the map. You can click on the marker to show the current position and drag it to update the position.

Try this code and let me know what you think.

function updateMarkerPosition(latLng) 
{
    document.getElementsByClassName('add_lat')[1].value = latLng.lat();
    document.getElementsByClassName('add_lng')[1].value = latLng.lng();
}   

function add_editable_mkr()
{
    var popup_form = new google.maps.InfoWindow({      
        maxWidth:800
    });

    // Infowindow form
    var html =  '<div>'+
                    '<form name="add_data" action="phpinsert.php">'+
                            '<input type="text" class="add_lat" name="add_lat" value=""/>'+
                            '<input type="text" class="add_lng" name="add_lng" value=""/>'+         
                    '</form>'+
                    '</div>'; 

    popup_form.setContent(html);

    var marker_drag = new google.maps.Marker(
    {
        position: map.getCenter(),
        draggable:true,
        map: map,
    });                     

    google.maps.event.addListener(marker_drag, "click", function() 
    {                   
        popup_form.open(map, marker_drag);
        updateMarkerPosition(marker_drag.getPosition());
    }); 

    google.maps.event.addListener(marker_drag, 'dragstart', function()
    {
        popup_form.close();
    });
    google.maps.event.addListener(marker_drag, 'dragend', function() 
    {
        popup_form.open(map, marker_drag);
        updateMarkerPosition(marker_drag.getPosition());
    }); 


    google.maps.event.addListener(map, 'click', function(event)
    {
        marker_drag.setPosition(event.latLng);
    }); 
}

function initialize() 
{
    map = new google.maps.Map(document.getElementById("map"), 
    {
      center: new google.maps.LatLng(1.364236,103.796082),  
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: 
        {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
        },
        navigationControl: true,
        navigationControlOptions: 
        {
            style: google.maps.NavigationControlStyle.LARGE
        }
    });


    add_editable_mkr(); 
}