Map marker event to update Lat/Long

This topic has 4 replies, 2 voices, and was last updated 4 years, 10 months ago by ComSi.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
February 14, 2020 at 8:46 PM #18285
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?

Add New Note to this Reply
February 15, 2020 at 9:09 AM #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 );
} );
```
Add New Note to this Reply
February 17, 2020 at 4:29 PM #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?

Add New Note to this Reply
February 17, 2020 at 9:29 PM #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.

Add New Note to this Reply

February 17, 2020 at 9:33 PM #18318

ComSi
Participant

I was afraid so.

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

Add New Note to this Reply
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.