Google지도를 클릭 할 때 마커 추가

Question

Google지도가 포함 된 PHP 페이지를 만들었습니다. 내 목표는 사용자가지도를 클릭하면 마커를 추가하고 텍스트 상자에 표시되는 마커의 좌표를 추가하는 것입니다. 여기 내 자바 스크립트입니다 :

<script type="text/javascript"> 
     function tampil_peta() 
     { 
      var div_peta = document.getElementById('kanvas'); 
      var tengah = new google.maps.LatLng(-8.801502,115.174794); 
      var options = 
      { 
       center : tengah, 
       zoom : 14, 
       mapTypeId : google.maps.MapTypeId.ROADMAP 
      } 

      //membuat objek peta Google Maps 
      var google_map = new google.maps.Map(div_peta,options); 

      google.maps.event.addListener(google_map, "click", function (e) 
      { 
       var latitude = e.latLng.lat(); 
       var longitude = e.latLng.lng(); 
       var location = new google.maps.LatLng(latitude,longitude); 

       document.getElementById('lattext').value = latitude; 
       document.getElementById('lngtext').value = longitude; 
      }); 
     } 
     function add_marker(location) 
     { 
      var marker = new google.maps.Marker({ 
       position : location, 
       title : "Titik A", 
       draggable : false, 
       map : google_map 
      }); 

     } 

    </script> 

이 자동으로 마커의 위도와 경도 데이터로 채워 져야 2 텍스트 상자에 포함 된 형태의 코드입니다 :

<form id="koordinat_a" nama="koordinat_a" method="POST" action=""> 
Latitude : <input type="text" class="form-control" id="lattext" name="lattext" placeholder=" Latitude" style="width:310px"> &nbsp;&nbsp; 
Longitude : <input type="text" class="form-control" id="lngtext" name="lngtext" placeholder=" Longitude" style="width:310px"> &nbsp;&nbsp;     
<button type="button" id ="pilih" name="pilih" class="btn btn-primary" onClick="return select_titik(document.getElementById('lattext').value,document.getElementById('lngtext').value)">Choose</button> 
</form> 

위도를 텍스트 상자에 표시된 클릭 좌표의 경도. 내 문제는지도를 클릭 할 때마 다 표식을 추가하는 것입니다. 누구도 저를 도울 수 있습니까? 당신의 도움이 도움이 될 것입니다. 고맙습니다 ...

Answer 1

바로 사용할 수있는 add_marker이라는 기능이 있습니다. 그것을 호출하고 생성 한 위치 객체를 전달하십시오.

시도 :

<script type="text/javascript"> 
    var google_map; 
    function tampil_peta() 
    { 
     var div_peta = document.getElementById('kanvas'); 
     var tengah = new google.maps.LatLng(-8.801502,115.174794); 
     var options = 
     { 
      center : tengah, 
      zoom : 14, 
      mapTypeId : google.maps.MapTypeId.ROADMAP 
     } 

     //membuat objek peta Google Maps 
     google_map = new google.maps.Map(div_peta,options); 

     google.maps.event.addListener(google_map, "click", function (e) 
     { 
      var latitude = e.latLng.lat(); 
      var longitude = e.latLng.lng(); 
      var location = new google.maps.LatLng(latitude,longitude); 

      document.getElementById('lattext').value = latitude; 
      document.getElementById('lngtext').value = longitude; 
      add_marker(location); 
     }); 
    } 
    function add_marker(location) 
    { 
     var marker = new google.maps.Marker({ 
      position : location, 
      title : "Titik A", 
      draggable : false, 
      map : google_map 
     }); 

    } 

</script> 

Answer 2

위도/경도를 마커 기능에 전달한 다음 다른 LatLng 개체를 인스턴스화 해보세요.

function add_marker(lat, lng) 
     { 
       var location = new Google.maps.LatLng(lat, lng); 
       var marker = new google.maps.Marker({ 
        position : location, 
        title : "Titik A", 
        draggable : false, 
        map : google_map 
       }); 

      }