レスポンシブサイトで、画面サイズが変わってもgooglemapのピンを中心に表示する方法です。

1.iframeを使うのではなく、空のdiv要素を用意します。

<div id="map_Worp">
  <div id="map"></div>
</div>

2.CSS

#map_Worp {
  position: relative;
  padding-top: 50%;
}
#map {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

3.外部スクリプトをbodyの一番下に記述します。

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>

4.下記のスクリプトも下に追加します。

function initialize() {
  var myLatlng = new google.maps.LatLng(53.3333,-3.08333),
  mapOptions = {
    zoom: 11,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions),
  contentString = 'Some address here..',
  infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 500
  });

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });

  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

5.地図の緯度と経度はgooglemapのurlの部分に表示されます。