Hello,
Forgive my poor English, very happy to use beaver builder despite some small problems that will certainly be quickly resolved. I’m not a pro but I write a website for a friend and I have a display problem with a google map in js. After many tests and often turning in circles because I’m not a specialist, I decided to give try on a page without bbuilder. And it works! So there is a problem due to the theme or builder.
Site address: www.nobile57.fr/isaloisirs
pages problems: Pössl and Roadcar under WordPress and BBuilder
no problem : test under WP and without BBuilder.
I do a lot of testing but have not found the solution. Thank you in advance to bring me a precious help.
I note that I am pro customer and I am a fan of your application and my age (69 years) is not an obstacle to the freedom to create.
Best regards
[email redacted]
Hey nobile57,
Could you please check if you have the latest BB plugin installed and are you using our Map module to embed it? You can check out our KB for more info on how to embed Google Map using our Map Module here
Thanks!
KC
Bonjour KC and thank you for your reply,
I use the latest pro version 1.6.4.1 and I can’t use the Map module because I would use a javascript written especially using the Google Maps API.
This script should dynamically display around forty markers from an XML file. You can see it here :
http://www.isaloisirs.com/camping-car-neuf-occasion-moto/posslfrance.php
The question is simple: can we use the Google API plugin with the bbuilder plugin ? In my case it is the only solution.
@+ (soon on the net)
Hey Nobile57,
Do you mind sharing the JS script for the map so we can play around with it?
Ben
Hello Ben,
Thanks,
How to send a script via mail ? You can find the JS script by observing the source code on the following page (link in my previous mail): display of the card begin at var map = new map…to… google.maps.map ( I put the code below ; I hope that’s okay.
I tried the plugin WP Google maps with pro add-on and it works fine within your builder with help of a xml file, but I still have to solve the problem of dynamically change the zoom and center on a point of the map by clicking a button on the outside of the card. My JS script do it within the bb theme but not under the bb plugin.
<script type="text/javascript">
<!--Déclaration des variables globales-->
var map;
<!--Cette fonction initialise les données d'affichage de la carte, appel dans la balise body-->
function initialize() {
<!-- Déclaration de l'objet de type LatLng -->
var latlng = new google.maps.LatLng(47,6);
<!-- Déclaration des options de la map -->
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
<!-- Instanciation de l'objet de type Map -->
map = new google.maps.Map(document.getElementById("carte"), myOptions);
Cordially
Hey Nobile57,
The code’s not available on that page anymore as it has already been parsed. I tried the code above but it doesn’t seem to work. Do I need to install a certain plugin to get it working?
Ben
Hey Ben,
Thank you Ben this is not necessary, I am trying to learn how to create a plugin by following the tutorial of your knowledge base, I will see.
My problem for now remains how to revive an existing google maps plugin (that’s works)
with new settings (zoom and center) following an external button click using jQuery.
@+ Norbert
Hey Norbert,
Not really sure what you’re asking for here. Have you tried using our Maps module? If so, what feature are you looking for that isn’t there?
Ben
Hey Ben,
I read the following on Versioning | Maps JavaScript API | Google for Developers
You can indicate which version of the API to load in your application by specifying the v parameter of the Google Maps JavaScript API bootstrap request. The following options are supported: The experimental version, specified with v=3.exp. The release version, specified with v=3. A specific version number. For example v=3.20 or v=3.21.
and I put the div containing my card and the google api js script to a shortcode.
echo "<div id='carte' style='width: 100%; height: 600px;'>carte</div><script type='text/javascript' ><!--Déclaration des variables globales-->\n"; echo " var map;\n"; echo "<!--Cette fonction initialise les données d'affichage de la carte, appel dans la balise body-->\n"; echo " function initMap() {\n"; echo " <!-- Déclaration de l'objet de type LatLng --> \n"; echo " var latlng = new google.maps.LatLng(46.76306,2.42472);\n"; echo " <!-- Déclaration des options de la map -->\n"; echo " var myOptions = {\n"; echo " zoom:6,\n"; echo " minZoom: 3,\n"; echo " maxZoom: 21,\n"; echo " center: latlng,\n"; echo " zoomControl: true,\n"; echo " panControl: false,\n"; echo " mapTypeControl: true,\n"; echo " streetViewControl: true,\n"; echo " draggable: true,\n"; echo " disableDoubleClickZoom: false,\n"; echo " scrollwheel: false,\n"; echo " mapTypeId: google.maps.MapTypeId.ROADMAP \n"; echo " };\n"; echo " <!-- Instanciation de l'objet de type Map -->\n"; echo " map = new google.maps.Map(document.getElementById(\"carte\"), myOptions);\n"; echo "}\n</script>";
The web page calls the following script just before the end of the body:
<script type = ‘text / javascript’ src = ‘http: //maps.google.com/maps/api/js?v=3.21&sensor = false?’> </ script>
This string “v=3.2.1&” made the difference and my card appeared… Youpee!
It also works with another version for example v3.14.
Best regards
@ +
Hey Norbert,
Glad you got it working! And thanks for sharing the solution! Have fun with BB! 
Ben
Hey Ben,
I tried using our Maps module and I’m using it in my contact page.
See here why I needed my own js script :
http://nobile57.fr/isaloisirs/possl-france/
I like BBuilder and I will complete the integration of my site in WP thanks to him .
Gotcha! Yeah, our Maps module can’t handle that. Good luck with the site!
Ben
Hey Ben,
Nothing to do with BB, I discovered another issue by testing Google Maps, and I would like sharing a fix that works perfectly.
I found it on GitHub forum :
Bootstrap distorts some Google Maps Controls and Overlays. nodrog commented on 7 Mar 2012 there is also an issue with the dropdowns for terrain and overlays, add this will fix both : #map label { width: auto; display:inline; } #map img { max-width: none; }
and it solved.
have a nice week end
@+
Norbert
Have a nice week end
Awesome! Our theme is based on Bootstrap so this can definitely help! Thank you, Norbert!
Ben