google maps draggable markerを別のページに更新しました

Question

私はマップをクリックして、インフォボックスフォームでマーカーを挿入してデータを編集してデータベースに保存できるGoogleマップを持っています。これへの類似した：

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

が、私は私のマーカーがドラッグ可能とされてきました。更新された緯度&を別の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

OKを、それを考え出しました。 GoogleマップはHTMLをドキュメントに置くだけではありません。私は何が起こっているのか分からないが、何とかコンテンツをクローンすると思う。 add_latというIDを持つ2つの入力タグがあるようです。だから、そのクラス名で要素を取得し、そのように更新する必要があります。これは文書の2番目の要素です。 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(); 
}