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

Question

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!

Answer 1

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>';