Home Forums ACF PRO Dynamically Populate Google Map


Dynamically Populate Google Map

  • Hey everyone,

    I’m looking to fill in the Google Map on the backend (wp-admin) with an address and have it generate the lat, lng and pin on the map based on the address.

    As an example, I have an address field. When the address field is entered, I’d like to call some JavaScript that renders that address within the Google Map.

    The reason is, we need to keep the address field separated from the Google Map so that the user can manipulate the Google Map to pin a more accurate location. But, when an address is entered, I’d like the Google Map to default to where that address is.

    So far, I have successfully filled the Google Map search value with the value from the address field, however, I can’t get the search to submit and show the address pinned on the map. Here is what I’ve tried:

    search.val( $('.event_venue_address input').val() ).focus().trigger( 'enterKey' );

    This doesn’t seem to do anything.

    Alternatively, I can save all of the data to the post and then reload the edit page, however, without the lat and lng data saved, the Google Map still seems like it doesn’t render.

    Any advice or thoughts on ways to do this?

  • In case anyone else tries to do something like this, not sure if this is a legit way of doing it, but it seems to work:

    search.val( $('.event_venue_address input').val() ).promise().done(function(){ acf.fields.google_map._search( e ); });

  • Where did you put this code?

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

The topic ‘Dynamically Populate Google Map’ is closed to new replies.