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

  • Creator
    Topic
  • #18285
    Resolved ComSi
    Participant

    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(this.map, 'click', function (event) {
      that.marker.setPosition(event.latLng);
      that.updateCoordinate(event.latLng);
    });

    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
    Replies
  • #18294
    Anh Tran
    Keymaster

    Hi,

    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 = $mapField.data( 'mapController' );
    
    // Then you can run
    var map = controller.map;
    google.maps.event.addListener( map, 'click', function ( event ) {
        controller.marker.setPosition( event.latLng );
        controller.updateCoordinate( event.latLng );
    } );
    #18314
    ComSi
    Participant

    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) {
          mapController.marker.setPosition(event.latLng);
          mapController.updateCoordinate(event.latLng);
          // update the input field with the marker location
          $coordsInput.val(event.latLng.lat() + "," + event.latLng.lng());
        });
    
        // we need to wait 200ms for the map to be loaded and available
      }, 200);
    })(jQuery);
    

    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?

    #18317
    Anh Tran
    Keymaster

    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.

    #18318
    ComSi
    Participant

    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.
grid gear info copy caret-up caret-down trash