title: Google Maps Custom positioning
body: <p>I currently have a google map appearing in 2 sections in 2 different map container sizes.</p>
  
  <p><a href="http://www.crippssears.com/about/global-reach/" rel="nofollow">http://www.crippssears.com/about/global-reach/</a></p>
  
  <p><a href="http://www.crippssears.com/people/mike-cripps/" rel="nofollow">http://www.crippssears.com/people/mike-cripps/</a></p>
  
  <p>I need to be able to shift the maps positioning up, so that the map is centred vertically, and all map dots and pins can be shown.</p>
  
  <p>I found a solution within the custom.css file with the following css.</p>
  
  <pre><code>.page-id-35 .avia-google-map-container div div div div div {
  margin-top: 0px;
  margin-left: 0px;
  }
  
  .page-id-35 .avia-google-map-container div div div div img {
  top: 84px;
  position: relative;
  left: 13px;
  }
  
  
  #av_gmap_1&gt;div&gt;div&gt;div&gt;div&gt;div {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  width: 100%;
  transform-origin: 417px 250px 0px;
  transform: matrix(1, 0, 0, 1, -30, -100);
  
  }
  
  #av_gmap_1&gt;div&gt;div&gt;div&gt;div&gt;div&gt;div {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  width: 100%;
  transform-origin: 417px 250px 0px;
  transform: matrix(1, 0, 0, 1, 30, 100);
  }
  
  
  
  
  .single-portfolio .avia-google-map-container div div div div div {
  margin-top: 40px;
  margin-left: 0px;
  }
  </code></pre>
  
  <p>This solution works, however when page is updated, chrome has an issue displaying the map pin animations + firefox displays the map completely differently.</p>
  
  <p>Any help or advice would be appreciated!</p>