Custom Fields
Support General Map marker event to update Lat/Long

  • Creator
  • #18285
    Resolved ComSi

    I want to add an address meta field that will automatically populate address fields via Google Places. This works as expected via the Meta box Geolocation; After I search for an address fills in the correct address data and it places a marker on the Google Map.

    The problem I want to fix now is that the marker is not always 100% accurate and I want to be able to move them over to the other side of the building, or the other side of the street...

    Moving the marker however does not adjust the Lat/Long, so saving the post resets the marker back to the Lat/Long that Google found for the supplied address.

    I looked around and I think /meta-box/js/map.js this piece of code should do the magic, but I can't extend this in my own javascript for example. I can't find a way to hook into the map since there is no global var available.

    google.maps.event.addListener(, 'click', function (event) {

    How can I trigger a Google Map event when the map is clicked/marker is moved?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
  • #18294
    Anh Tran


    The map controller (JS object, an instance of MapField) is stored in the field data-mapController, and I think you can access to that object to perform custom triggers:

    var $mapField = $( '.rwmb-map-field' ); // Set specific selector to target the map you want.
    var controller = $ 'mapController' );
    // Then you can run
    var map =;
    google.maps.event.addListener( map, 'click', function ( event ) {
        controller.marker.setPosition( event.latLng );
        controller.updateCoordinate( event.latLng );
    } );

    Thanks Anh Tran, that is basically what I was looking for!

    I ended up with the following code (for anyone that would like a working example):

    (function($) {
      setTimeout(() => {
        // Set this to the input field that needs to be updated with the new coordinates
        var $coordsInput = $("#debug_geometry");
        // Get the map controller
        var mapController = $(".rwmb-map-field").data("mapController");
        // Update the coordinates field with the new position the marker has been dragged to
        google.maps.event.addListener(mapController.marker, "dragend", function(event) {
          // update the input field with the marker location
          $coordsInput.val( + "," + event.latLng.lng());
        // we need to wait 200ms for the map to be loaded and available
      }, 200);

    Question though. I would rather have liked being able to use vanilla javascript instead of jQuery, trying to move away from jQuery wherever possible; But somehow document.querySelector(".rwmb-map-field").dataset.mapController is undefined.
    Any idea why?

    Anh Tran

    Hi, we use $.data to set the controller for the element. This is a jQuery function and it sets an object (controller), which I guess is not available via Element.dataset. The jQuery docs says:

    Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr.


    I was afraid so.

    We'll use jQuery too in this case, thanks for checking.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.