Support

Account

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

Solving

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.

    http://www.advancedcustomfields.com/resources/google-map/#using-a google map field

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

    Any

  • 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.

    https://goo.gl/8V3yzT

    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)

You must be logged in to reply to this topic.