Google map loading off-centre

Question

When I embed an iframe of a page containing a full width Google Map and place it in a jQuery accordion, when it loads it is slightly off centre.

http://codepen.io/anon/pen/jqMpKp

Is there a way to prevent this happening?

Here is the code of the page loaded in the iframe: http://codepen.io/anon/pen/oxzaEJ

What browser you using? When I look at the codepen in Chrome it appears to be centered fine. — Starscream1984, Mar 14 '16 at 10:59
I'm also using Chrome and seeing this: http://i.imgur.com/VMDrlbH.jpg, it's also off centre in Firefox. — Alistair, Mar 14 '16 at 11:22
Oh I see - I thought you meant that the iframe wasn't centered within the accordion. What you mean is that the google map doesn't centre itself around your pins. Your codepen doesn't give much away on how that map is generated... — Starscream1984, Mar 14 '16 at 12:18
Sorry, I should have been clearer. Here is the code from the page I'm loading in the iframe. It is the embed code from a Google Fusion table. http://codepen.io/anon/pen/oxzaEJ — Alistair, Mar 14 '16 at 12:25

score 0 · Answer 1 · answered Mar 14 '16 at 12:33

Looking at the code which generates the google map, you have a hard-coded centre point when you generate the Map object

center: new google.maps.LatLng(53.53081624504545, -361.97108326875),

I made the map centre more around the middle of the UK by changing this to

center: new google.maps.LatLng(53.53081624504545, -365.97108326875),

You can probably make do with these coordinates (or tweak them slightly) to get the map centered exactly where you want.

But, a more robust approach would probably be to programatically figure out the center by calculating the middle point from the coordinates of all the pins you add.

score 0 · Answer 2 · edited May 23 '17 at 12:23

Here I reproduced your issue

.tab_content {
  padding: 20px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab4" class="tab_content">
  <iframe src="https://s3-eu-west-1.amazonaws.com/glyndebourne-ss3-dev/cinema-map.html" width="100%" height="500px" frameBorder="0"></iframe>
</div>

<button onclick="$('.tab_content').hide();">Hide iframe</button>
<button onclick="$('.tab_content').fadeIn();">Show iframe</button>

You can remove the line display: none from the CSS since the show/hide is taken care of by JQuery.

.tab_content {
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab4" class="tab_content">
  <iframe src="https://s3-eu-west-1.amazonaws.com/glyndebourne-ss3-dev/cinema-map.html" width="100%" height="500px" frameBorder="0"></iframe>
</div>

<button onclick="$('.tab_content').hide();">Hide iframe</button>
<button onclick="$('.tab_content').fadeIn();">Show iframe</button>

Also check this: Javascript problem with iframe that's hidden before loaded

Google map loading off-centre

2 Answers2