JavaFX: Google Maps in a WebPane - Moving a Marker leaves old one behind

Question

I've got an application that runs an instance of the Google Maps API in a JavaFX WebView, and am trying to allow the user to move the map marker around.

I've tried the following:

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

As well as:

google.maps.event.addListener(map, 'click', function(event) {
  marker.setMap(null);
  marker = null;
  marker = new google.maps.Marker({
    position:event.latLng,
    map: map
  });
}

Both of these implementations create the same issue: Clicking on the map creates a marker at the new position, but the old position marker remains on the screen as well. Moving the map around and forcing the section with the old marker to reload removes that marker, leading me to believe this is not an issue of implementation but a bug in the web browser's handling of it. Any way to fix this, so that there isn't a duplicate marker left behind?

Answer 1

I think this is a matter of code implementation. Try this. Tested this on jsfiddle and it's working perfectly.

function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -25.363882, lng: 131.044922 }
});

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
draggable: true,
});

google.maps.event.addListener(map, 'click', function(e) {
updateMarkerPosition(marker,e);
});
}

function updateMarkerPosition(marker, e){
marker.setPosition(e.latLng);
}

If this seamless execution is not reflected in your JavaFX application, then it's not Google Maps API that has the problem.