Showing Google Map via acfform() and displaying markers

• 

  • joesilva7765

  • June 18, 2015 at 11:05 am

  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
• 

  

  • Jonathan

  • June 19, 2015 at 3:10 am

  Hi,

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

  • joesilva7765

  • June 19, 2015 at 8:16 am

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

  

  • Jonathan

  • June 21, 2015 at 3:12 am

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

  • mycreativeway

  • July 27, 2015 at 9:24 pm

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

  

  • Jonathan

  • August 1, 2015 at 6:09 pm

  Hi @mycreativeway

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

  • mycreativeway

  • August 1, 2015 at 6:36 pm

  This reply has been marked as private.
• 

  • mycreativeway

  • August 4, 2015 at 5:23 pm

  Hi @jonathan

  Any success?
• 

  

  • Jonathan

  • August 9, 2015 at 2:41 am

  Hi @mycreativeway

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

  I will have a look
• 

  

  • Jonathan

  • August 9, 2015 at 3:04 am

  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.