I’m trying to embed a google map at the Header Widget, as shown in integrity 1 demo.

I’ve the <iframe> code from google maps, and the code that is on the Header 2 widget area is:

[map]<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3415.017601615931!2d-8.796166999999539!3d40.15508301240187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd2248611f2c7c3b%3A0x9338c302336502ec!2sberry.pt!5e1!3m2!1spt-PT!2spt!4v1412436408634" width="435" height="350" frameborder="0" style="border:0"></iframe>[/map]

But, when I open the header widget area, the map is always with “full zoom out”, like this:

I’ve tried to add the zoom parameter (e.g. &z=16″), but it does not change the zoom.

My site: www.berry.pt

Thanks,
Carlos

Thanks for posting in.

Map is dynamically generated based on it’s container size. If its container has no width or height, the map can’t calculate the proper zoom and position. Containers with no width or height are elements that were loaded hidden just like header widgets.

Add this code at your customizer’s custom javascript under Admin > Appearance.

jQuery(function($){ $('a.x-btn-widgetbar').click(function(){ 

var reloaded = $(this).data('map-reloaded');

if( reloaded !== true) {

var iframe = $( '.x-widgetbar-inner .x-map iframe' ).get(0);
iframe.src = iframe.src;

$(this).data('map-reloaded', true );

}

}); });

Cheers!

I’m having the same problem. I’ve tried to find Admin > Appearance and I’m not able to find this location. I do see a place to enter custom javascript under Appearance > Customize > Custom.

However in that custom section, I have Google Analytics code in there. Once I do put the code that you mention above, there is no change to the Google map. I still have the same cut off and zoomed out look mentioned by cmadao.

I’m open to suggestions. Thanks.

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation.

Thanks!

The latest version of X is 2.6.0 and the x-shortcodes plugin is 2.5.0. Please verify you have both of these versions, they need to be in sync or Javascript issues can occur.

You can find the latest version numbers here: (http://theme.co/x/member/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Upon checking on your Customizer Javascript,

I can see this code,

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-49877122-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Please remove <script type="text/javascript"> and </script>

You should only add something like this

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-49877122-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

Hope that clarifies,

Have a great day