Google Maps API v3 Second Map Resize and Center

i forgot the embed maps on wordpress and moved to the google maps api v3.
So, i’m using this:

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>

and this function:

function initialize() {

//replace 0's on next line with latitude and longitude numbers from earlier on in tutorial.
var myLatlng = new google.maps.LatLng(40.654372, -7.914174);
var myLatlng1 = new google.maps.LatLng(30.654372, -6.914174);
    var myOptions = {
      zoom: 16,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var myOptions1 = {
      zoom: 16,
      center: myLatlng1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

//here's where we call the marker.
//getElementById must be the same as the id you gave for the container of the map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions1);
 //google.maps.event.trigger(map1, 'resize');
 //map1.setCenter(myLatlng1);

        var marker = new google.maps.Marker({
      position: myLatlng,
      title:"ADD TITLE OF YOUR MARKER HERE"
  });

        var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">ADD TITLE HERE</h2>'+
    '<div id="bodyContent">'+
    '<p style="font-size:1em">ADD DESCRIPTION HERE</p>'+
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

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

  // To add the marker to the map, call setMap();
  marker.setMap(map);  
  }

  function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
  }

  window.onload = loadScript;

as you can see, there are two maps declared. Im my website, i’m using horizontal tabs to alternate between showing maps.

The problem is one i found in other topics here, but the solutions gave there doesn’t seem to work. as you can see in the lines i commented:

//google.maps.event.trigger(map1, 'resize');

//map1.setCenter(myLatlng1);

this code is not working to center the second map. The map does not fit on the div correctly, and the center icon is on the left the corner, the usual problem.

I guess you already know what the problems are, however if you need pictures i will provide them without a problem.

How the tabs code looks on wordpress:

    [wptabs type="accordion" mode="horizontal"]

[wptabtitle] Portugal[/wptabtitle] [wptabcontent]

<div id="map_canvas" style="width: 100%; height: 300px; border: 1px solid;"></div>
[/wptabcontent]

[wptabtitle] Brasil[/wptabtitle] [wptabcontent]

<div id="map_canvas1" style="width: 100%; height: 300px; border: 1px solid;"></div>

[/wptabcontent]

[/wptabs]