Передайте обновленный файл маркера перетаскивания Google Maps на другую страницу

Question

У меня есть Google Maps, где пользователи могут нажимать на карту, чтобы вставить маркер с формой информационного окна, где они могут редактировать и сохранять данные в базе данных.Это похоже на это:

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

, но я сделал маркер перетаскиваемым.Как передать обновленный lat & lng на другую страницу PHP для обновления базы данных?

В настоящее время я делаю это:

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(); 
}

Но значения передаются другим моимстраница как пустые значения.Есть ли другой способ сделать это?

Заранее спасибо!

Answer 1

Похоже, ваши текстовые вводы не имеют атрибута id. Таким образом, вы можете либо дать им атрибут id, либо ссылаться на них по форме

Попробуйте здесь, где вы установили свой HTML, и дайте мне знать, как он работает:

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

Answer 2

ОК, разобрался. Карты Google не просто помещают HTML в документ. Я не уверен, что происходит за кулисами, но я думаю, что это каким-то образом клонирует контент. Кажется, есть 2 входных тега с идентификатором add_lat. Итак, вы должны получить элемент по имени класса и обновить его таким образом. Это второй элемент в документе. Если вы используете jQuery, вы можете легко обновить все элементы с определенным именем класса в любом месте на странице.

Кроме того, я обнаружил, что с написанным вами кодом происходят разные странные вещи. Итак, я быстро переписал его, чтобы иметь только один маркер и одно информационное окно на карте. Вы можете нажать на маркер, чтобы показать текущую позицию, и перетащить его, чтобы обновить позицию.

Попробуйте этот код и дайте мне знать, что вы думаете.

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(); 
}