Maps Api V3 Marker Disappears On Click

Firstly, although there are several other similar issues on here I can't tailor them to my own code - the issues seem to still originate from elsewhere. I'm trying to use the Googl

Solution 1:

I get a javascript error with your code, when I click to move the marker:

UncaughtTypeError: undefined is not a function

on this line:

document.getElementById("P102_LATITUDE").value = this.getPosition().lat();

The this in a map click event is the map. You are using the click event incorrectly (looks like you got that code from a Google Maps Javascript API v2 example). The google.maps.eventMouseEvent object only has one property .latLng (javascript is case sensitive):

 
Properties  Type    Description
latLng      LatLng  The latitude/longitude that was below the cursor when the event occurred.

and the function signature is:

click MouseEvent This event is fired when the user clicks on the map (but not when they click on a marker or infowindow).

google.maps.event.addListener(map, 'click', function(event) {
 marker.setPosition(event.latLng); 
 document.getElementById("P102_LATITUDE").value = marker.getPosition().lat();
 document.getElementById("P102_LONGITUDE").value = marker.getPosition().lng();
});

working fiddle

code snippet:

var map;

functioninitialize() {
  var myLatlng = new google.maps.LatLng(51.9, -2.08);

  var myOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

  var marker = new google.maps.Marker({
    draggable: true,
    position: myLatlng,
    map: map,
    title: "Your location"
  });

  google.maps.event.addListener(marker, 'dragend', function(event) {
    document.getElementById("P102_LATITUDE").value = this.getPosition().lat();
    document.getElementById("P102_LONGITUDE").value = this.getPosition().lng();
  });
  google.maps.event.addListener(map, 'click', function(event) {
    marker.setPosition(event.latLng);
    document.getElementById("P102_LATITUDE").value = marker.getPosition().lat();
    document.getElementById("P102_LONGITUDE").value = marker.getPosition().lng();
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><inputid="P102_LATITUDE" /><inputid="P102_LONGITUDE" /><divid="map-canvas"style="border: 2px solid #3872ac;"></div>