How can change marker position on the click event?

Question

i am want to change the marker position on the click event to where the user clicked on the map, but my script don't seem to work.

this is the error i get on the console. InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

this is my script:

                <script>
                let map;
                function initMap() {
                    map = new google.maps.Map(document.getElementById("map"), {
                        center: { lat: -34.397, lng: 150.644 },
                        zoom: 8,
                    });

                    const uluru = { lat: -34.397, lng: 150.644 };
                    let marker = new google.maps.Marker({
                        position: uluru,
                        map: map,
                        draggable: true
                    });

                    google.maps.event.addListener(map,'click',
                        function (event){
                            moveMarker({position:event.latLng});
                        }
                    )
                    
                    function moveMarker(props){
                        marker.setPosition(props)
                    }
                }
            </script>

score 0 · Accepted Answer · answered Apr 13 '21 at 12:53

You have ga typo in your code. The marker.setPosition method takes a google.maps.LatLng or google.maps.LatLngLiteral object as its argument. You are passing neither, you are providing an anonymous javascript object with a position property.

Either change your moveMarker function to:

function moveMarker(props) {
  marker.setPosition(props.position)
}

proof of concept fiddle

or remove the creation of the anonymous object from the call to it:

google.maps.event.addListener(map,'click',
    function (event){
        moveMarker(event.latLng);
    }
)

code snippet:

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8,
  });

  const uluru = {
    lat: -34.397,
    lng: 150.644
  };
  let marker = new google.maps.Marker({
    position: uluru,
    map: map,
    draggable: true
  });

  google.maps.event.addListener(map, 'click',
    function(event) {
      moveMarker({
        position: event.latLng
      });
    }
  )

  function moveMarker(props) {
    marker.setPosition(props.position)
  }
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>

  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" async></script>
</body>

</html>

How can change marker position on the click event?

1 Answers1