CSS or JavaScript Conflict - Google Map Won't Display - javascript

The WordPress theme I am using has built in JavaScript and CSS for Google maps on the contact page. So, I'm guessing there is conflicting code. I can't seem to find where the conflict is when I am trying to use a plugin which also uses Google Maps.
I would really appreciate any help correcting this issue so that this Google Map will display instead of an empty gray box. I tried everything I know to do.
http://boothambuilders.com/service-area/
The plugin works on all other themes I'm using.
Also, this is the only page where the background doesn't display properly. I don't know how it is related to the issue.

It is not a CSS conflict, you are calling the Google Maps API twice...

Related

google map plugin on wordpress page not showing

I have a website made with Wordpress that should show a Google Map on three sub-pages. The problem is the map only shows if I open the page and then refresh it.
Note: I don't have a cache plugin installed.
Live site
Google Maps plugin
the problem is solved now.
it was an issue with the theme. i deactivated the ajax of the theme and the maps are now working.

How to identify JQuery version being used in a web page

Hi i found this page:
https://crossme.jp/
and I wonder if it's using fullpage javascript for the images. I know that is using three JavaScript for the effect of the cursor, but for the effect of background images I don't know.
I use google inspect for all my projects and I don't how to debug the java-scripts in the page.
Please help as I want to replicate this page.
In chrome you can check source tab in developer tools and find it out.
Or you can simply check the page source of the webpage and search for jquery.
But to answer your question, this page is using jQuery v1.10.2
And for the cursor as well as 3D effects for images, this page is using mrdoob's 3D library : https://github.com/mrdoob/three.js/

Facebook Comment Box Disappears in Accordian

I have two examples of Facebook comment box failing to load when an accordian is collapsed and reloaded. One HTML/JavaScript basic and the other in a Wordpress site via Visual Composer - this problem also occurs in numerous other accordions
HTML Example - http://iknowdigital.co.uk/htmlexample/
Wordpress Via Visual Composer http://thesingingmajor.co.uk/test-comment-box-martin/
I have contacted Facebook Support and Visual Composer support and neither can help out.
here are the replies
From VC
Hi Martin, The issue is not with the iframe, but the js that facebook comments use to render. It is not able to re-initialize itself when it is displayed as hidden and hence the issue occur. You can see that when you add nay iframe, it works fine without any issue. It is the js from the comments which is restricting it. As mentioned previously, it will require some custom js code to re-initialize this loading when the closed (hidden) accordion is opened. Kindly check.
From Facebook
Hi Martin,The issue here is the way the library is working. If you debug the code you'll see the plugin does not disappear, the issue is that the library is changing the width of the iframe that contains the plugin to 0 and you cannot see the comments plugin. In order to avoid this situation you will have to manually change the width value again and you'll see the comment plugin is still there. I'm going to close this bug as "By design" as this is not an issue in our side.
I'm not a javascript programmer, so am really at a loss here. Can anyone chip in with some advice here?
Thanks Martin

Google Docs - Extend with a chrome extension?

I was building a container bound script for google docs, then wanted a solution that would work on all documents, not just one, so I started writing a chrome extension with content scripts that add a menu. This was really hard.
My question is, is there a good way to add a menu to ALL google docs for an account?
Thanks
Thats the only way.
Why was it that hard with content scripts? Ive done it before.

Conflict with Google maps V3 API and MooTools

I'm have a conflict with Google Maps v3 API and Mootools. For some reason when the page where the maps is on is loaded it looks fine but about 10 seconds later the map disappears as well as all but 1 pin point.
You can see it here: http://goo.gl/Sr0b2
If I remove mootools.js which loads in my footer, the problem goes away but then some of the javascript on my WordPress theme doesn't work such as the drop down menu in the header so removing mootools is not an option.
Anyone know what may be causing the conflict and how I can fix it?
Any help is appreciated.
I solved the problem by using an iframe for the map, this way the mootools.js on the page doesn't affect the map script. I usually don't use iframes but in this situation it doesn't affect the site's SEO or anything else and it's a perfect solution. So if you have this same issue you can load the map on a page of its own (with nothing but the map) and then insert it anywhere with

Categories

Resources