Change google map marker position onclick

Question

I want to move my marker and get the long and lat when I click the map. Currently, my map is displayed but I'm unable to change the marker location. I tried imitating coder in this .

My reference uses the button to change the location of the marker. In my situation, I need to click on the map. I tried to modify it to cater my situation and still not working.

here is my code :

jQuery(document).ready(function( $ ) {

        function myMap(lat,long) {
            var myCenter = new google.maps.LatLng(lat,long);
            var mapCanvas = document.getElementById("googleMap");

            var mapOptions = {
                center: myCenter, 
                zoom: 15,
                treetViewControl: false,
                mapTypeControl: false
            };

            var map = new google.maps.Map(mapCanvas, mapOptions);
            var marker = new google.maps.Marker({position:myCenter});
            marker.setMap(map);

            // Zoom to 9 when clicking on marker
            google.maps.event.addListener(marker,'click',function() {
            map.setZoom(9);
            map.setCenter(marker.getPosition());
            });

            //sets variable for lat and long
            $('.lat').text(lat);
            $('.long').text(long);
        }

        function newLocation(newLat,newLng)
        {
            map.setCenter({
                lat : newLat,
                lng : newLng
            });
        }

        google.maps.event.addDomListener(window, 'load', myMap(3.1412,101.68653));


        $(document).ready(function ()
        {
            google.maps.event.addListener(map, 'click', function(event) {
                newLocation(event.myCenter);
            });
        });

    });

Answer 1

1) click on map and change marker's position to where you clicked

var map, marker;
$(document).ready(function() {

    function myMap(lat,long) {
        var myCenter = new google.maps.LatLng(lat,long);
        var mapCanvas = document.getElementById("googleMap");

        var mapOptions = {
            center: myCenter, 
            zoom: 15,
            treetViewControl: false,
            mapTypeControl: false
        };

        map = new google.maps.Map(mapCanvas, mapOptions);
        marker = new google.maps.Marker(
            {
                position:myCenter,
                draggable: true
            }
        );
        marker.setMap(map);

        // Zoom to 9 when clicking on marker
        google.maps.event.addListener(marker,'click',function() {
            map.setZoom(9);
            map.setCenter(marker.getPosition());
        });

        //sets variable for lat and long
        $('.lat').text(lat);
        $('.long').text(long);
    }

    function newLocation(newLat,newLng)
    {
        map.setCenter({
            lat : newLat,
            lng : newLng
        });
    }

    google.maps.event.addDomListener(window, 'load', myMap(3.1412,101.68653));


    $(document).ready(function ()
    {
        // click on map and set you marker to that position
        google.maps.event.addListener(map, 'click', function(event) {
            marker.setPosition(event.latLng);
        });
    });

});

2) change a marker's position by drag and drop

var map;
$(document).ready(function() {

    function myMap(lat,long) {
        var myCenter = new google.maps.LatLng(lat,long);
        var mapCanvas = document.getElementById("googleMap");

        var mapOptions = {
            center: myCenter, 
            zoom: 15,
            treetViewControl: false,
            mapTypeControl: false
        };

        map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new google.maps.Marker(
            {
                position:myCenter,
                draggable: true // set marker draggable
            }
        );
        marker.setMap(map);

        // Zoom to 9 when clicking on marker
        google.maps.event.addListener(marker,'click',function() {
            map.setZoom(9);
            map.setCenter(marker.getPosition());
        });

        // when dragend, show new lat and lng in console
        google.maps.event.addListener(marker, 'dragend', function(){
            console.log("lat: "+marker.position.lat())
            console.log("lng: "+marker.position.lng())
        })

        //sets variable for lat and long
        $('.lat').text(lat);
        $('.long').text(long);
    }

    function newLocation(newLat,newLng)
    {
        map.setCenter({
            lat : newLat,
            lng : newLng
        });
    }

    google.maps.event.addDomListener(window, 'load', myMap(3.1412,101.68653));


    $(document).ready(function ()
    {
        google.maps.event.addListener(map, 'click', function(event) {
            newLocation(event.myCenter);
        });
    });

});