Google Maps Embed API Not Centering Pins - html

Question

I am building a website that uses Google's Mapping API Embed V1.0, and the coordinates that I specified are showing correctly, however, the point is not in the center of the mapping view.
Photo of Problem:
iFrame Code:
<iframe class="sectionMap" width="300" height="300" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAGJVo8xnxXbEICl5IuDAbmWIBsE0cFKVQ&q=42.3599,-71.0655&zoom=18&maptype=satellite"></iframe>
CSS:
.sectionMap{
/*
width: 300px;
height: 300px;
*/
display: block;
position: relative;
left: 50%;
margin-left: -150px;
border-style: solid;
border-width: 2px;
box-shadow: 1px 1px 5px 3px #ccc;
}
Here is a sample page from the web app:
<section id="williamMonroeTrotterHouse" data-role="page" data-theme="a">
<header data-role="header" data-position="fixed" data-id="appHeader">Back
<h1>William Monroe Trotter House</h1>
</header>
<div data-role="content">
<p><span class="sectionTitle">Location: </span>97 Sawyer Ave., Dorchester</p>
<p><span class="sectionTitle">Description: </span>Home of African-American journalist and Harvard graduate William Monroe Trotter. Trotter publisher The Guardian, and meetings of African-American activists, W. E. B. Du Bois among them, took place at this house.</p>
<img src="Landmark_Photos/WIlliam_Monroe_Trotter_House.jpg" class="sectionPhoto">
<br>
<iframe class="sectionMap" width="300" height="300" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAGJVo8xnxXbEICl5IuDAbmWIBsE0cFKVQ&q=42.3127,-71.0624&zoom=18&maptype=satellite"></iframe>
</div>
</section>
Any ideas why this is not centering?
PS: I don't believe this is a duplicate post, as Google recently updated the mapping api and the answers to previous questions do not work.

Answer 1

A fiddle having exactly you code works fine in my Safari version (5.1.7). Wich version are you having problems with? The only reason I could imagine is the "tricky" centering with position and margin. I'd try margin:0 auto; for centering, without the position relative, top & margin. Or go the old way: display:inline-block inside a div with text-align:center. IMHO this last one is the most cross-browser.
.sectionMapWrapper{
width:100%;
text-align:center;
}
.sectionMap{
display: inline-block;
border-style: solid;
border-width: 2px;
box-shadow: 1px 1px 5px 3px #ccc;
}
EDIT:
If it didn't solve the problem check if you have some kind of library (or your own function) that could make your iframe "display: none".
If it have no layout (display:none) when the content is loaded it's size is 0x0 for the iframe script, and the center is at ... 0/x , 0/x. Keep display block until content is loaded, then you can hide it with display:none.
Under a similar situation I worked around this placing the iframe inside a 0x0 sized div with overflow hidden (at style attribute). When sure of iframe content is loaded fire a function that set the iframe display to none and delete the wrapper div style attribute. (or similar, depending of the additional behaviour you need). Hope it helps.