Meta Box

Map marker event to update Lat/Long

Support › General › Map marker event to update Lat/LongResolved

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 14, 2020 at 8:46 PM #18285
    ComSiComSi
    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?

    February 15, 2020 at 9:09 AM #18294
    Anh TranAnh 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 );
} );
    February 17, 2020 at 4:29 PM #18314
    ComSiComSi
    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?

    February 17, 2020 at 9:29 PM #18317
    Anh TranAnh 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.

    February 17, 2020 at 9:33 PM #18318
    ComSiComSi
    Participant

    I was afraid so.

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

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.