add marker when the Google map clicked

Question

I made a php page that contain a Google map. My goal is to add a marker when the user click the map, and the coordinate of the marker displayed on text box. here is my javascript:

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

and this is the code of the form which contain 2 text box that should be filled with the latitude and longitude data of the marker automatically:

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

the latitude and longitude of the clicked coordinate displayed in the textbox perfectly. my problem is just adding the marker whenever the map clicked.. Is there anyone can help me? your help will be so helpful. thank you...

Answer 1

Try passing the lat/lng to your marker function, then instantiating another LatLng object.

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

            }

Answer 2

You have a function called add_marker that is ready-to-use. Call it and pass in the location object that you created.

Try:

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