Home Forums Front-end Issues Showing Google Map via acfform() and displaying markers


Showing Google Map via acfform() and displaying markers

  • Here is a fun one. I have a custom post type (post_type_a) that has a front end form which creates a new post in different post type (post_type_b). The front end form uses acfform() and has a Google Maps field for visitors to enter a location. What happens is when the acfform() is submitted it creates a new post in (post_type_b) and stores the original ID of (post_type_a) from which the form was submitted including the location field. Basically creating a relationship between both post types.

    On that same page I need a Google Map that shows markers from (post_type_b). I have everything working except the Google Map which displays multiple markers using data from (post_type_b) works fine. But the Google Maps field in the acfform() just shows a blank field with no map.

    I don’t see any JS errors but I am guessing that there is a conflict, acfform() is loading the necessary JS to show the acfform() Google Maps field and I am loading the proper JS for the additional map to display that is outline in the following. google map field

    Any ideas on how to fix this and get both maps to display?


  • Hi,

    If you check the console in Chrome, do you see any JS errors?

  • No, and I wish there was. It would make it easier to troubleshoot. See link for screen-shot.

    You can see that there is a blank Google Maps field in an acfform and then the map showing markers. If I remove the working Google Maps from the page the Google Map in the acfform works.

  • Hi,

    Okay. Can you try without including google maps js file yourself. Since ACF likely adds it with acf_form_head when there’s a google maps field.

  • Hi Jonathan,

    I’ve similar issue. I’ve also removed google map js file as you suggested, but still getting js error

    “Uncaught ReferenceError: google is not defined”

    Can you help me out here please?

    Thanks in advance.

  • Hi @mycreativeway

    Could you provide a link to the site you’re working on so that I can check myself?

  • This reply has been marked as private.
  • Hi @mycreativeway

    Sorry I’ve been on a small vacation thus haven’t checked in on the forums 🙂

    I will have a look

  • Alright so I’ve taken a look.

    I believe your issue isn’t with ACF per se but rather the fact that google maps wont load on a hidden element. It’s the same as when one tries to place a google map inside a tab.

    To solve it the map has to be initialised or reinitialised when the panel slides in and is visible.

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

The topic ‘Showing Google Map via acfform() and displaying markers’ is closed to new replies.