HTML: Two Google Maps side by side and linked (CSS banner)

<!DOCTYPE html>
<html>
<head>
  <title>HTML5</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=650, user-scalable=yes">
  
  
    
    
    
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    
    <style>
    
    @import url(https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic);

body {
      background: #FFFFEB;
      color: #333;
      /*font-family: "PT serif", serif;*/
      font-family: 'PT Sans', sans-serif;
      position: relative;
      width: 100%;
      margin-top: 0;
      margin-right: auto;
      margin-bottom: 4em;
      margin-left: auto;  /*width: 960px;*/
    }

header,
    footer,
    h1,
    h2,
    h3,
    h4,#FFFFEC
    aside {
      color: #000;
      /*font-family: "Ubuntu Sans", sans-serif;*/
    }

h1 {
      font-size: 58px;
      font-weight: 400;
      /*letter-spacing: -2px;*/
      letter-spacing: -1px; /*top right bot left*/
      /*color: #3E606F;*/
      color: #FFFFFF;
      /* [disabled]display: block; */
      /* [disabled]width: 960px; */
      margin: 0px;
    }

h2 {
      margin: 0px;  /*margin-top: 1.5em;*/
      /* [disabled]background-color: #CC3; */
      /* [disabled]display: block; */
    }

h1, h2 {
      text-rendering: optimizeLegibility;
    }

h2 a {
      color: #ccc;
      left: -20px;
      position: absolute;
      width: 600px;
    }

h3{
      margin-left: 15px;
      letter-spacing: 0.5px;
    }

p{
      width:600px;
      margin-left: 15px;
    }

h3~p{
      margin-left: 30px;
    }

a {
      color: steelblue;
    }

a:not(:hover) {
      text-decoration: none;
    }

.topBanner {
      background-color:#457993;
      padding-top: 30px;
      padding-bottom: 30px;
      top: 0px;
      margin-bottom: 30px;
      border-bottom-width: thin;
      border-bottom-style: solid;
      border-bottom-color: #3D4E5A;
      -moz-box-shadow: 0px 3px 2px #999;
      -webkit-box-shadow: 0px 3px 2px #999;
      box-shadow: 0px 3px 2px #999;
    }
    .bannerContent {
      width: 960px;
      margin-right: auto;
      margin-left: auto;

}
    .bannerContent a img{
      float: left;
      left: -50px;
      position: relative;
      margin-right: 10px;
      bottom: 15px;
      border-top-style: none;
      border-right-style: none;
      border-bottom-style: none;
      border-left-style: none;
    }

.map1{
      height:500px;
      width:550px;
      background-color: gray;
      position: relative;
      float:left;
    }

.map2{
      height:500px;
      width:550px;
      background-color: gray;
      background-color:red;
      position:relative;
      float:right;
    }

.container {
      width: 1200px;
      margin-right: auto;
      margin-left: auto;
      height: auto;
    }

</style>
    
    <script>
    
    var map;

$(document).ready(function(){

var mapOptions = {
      zoom: 11,
      center: new google.maps.LatLng(40.6700, -73.9400),
        //mapTypeId: google.maps.MapTypeId.ROADMAP
        mapTypeId: google.maps.MapTypeId.TERRAIN
      };

map = new google.maps.Map($('.map1')[0], mapOptions);
      map2 = new google.maps.Map($('.map2')[0], mapOptions);

google.maps.event.addListener(map, 'bounds_changed', function() {

map2.setZoom(map.getZoom())
        map2.setCenter(map.getCenter())

});

google.maps.event.addListener(map2, 'bounds_changed', function() {

map.setZoom(map2.getZoom())
        map.setCenter(map2.getCenter())

});

});//end document ready
    
    
    </script>
    
  </head>
  <body>

<div class="topBanner">
    <div class="bannerContent"> <a href="https://www.zevross.com" target="_new"><img src="https://www.zevross.com/images/zevrosslogo_update_sm2.png" alt="ZRSA"></a>
     <h1>This is a Title</h1>
   </div>
 </div>

<p></p>

</html>

Modified http://html5shiv.googlecode.com/svn/trunk/html5.js to a secure url

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js to a secure url

https://html5shiv.googlecode.com/svn/trunk/html5.js

https://maps.googleapis.com/maps/api/js?sensor=false

https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js