title: Google Maps - Strange vertical and horizontal lines at certain zoom levels in Safari
body: <p>I'm having an issue with Google Maps where these weird lines are coming up over my map at certain zoom levels in Safari. If I resize my browser they go away for a second then come back. I think it's to do with the Google Map being inside a container which has "margin: 0 auto;" as I tested it in a full width Google Map and there were no issues.</p>
  
  <p><a href="https://i.stack.imgur.com/x2Vvq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x2Vvq.png" alt=""></a></p>
  
  <p>EDIT: </p>
  
  <p>JS Fiddle here: <a href="http://jsfiddle.net/ojdavey/84ewc0jx/16/" rel="nofollow noreferrer">http://jsfiddle.net/ojdavey/84ewc0jx/16/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="map"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var map;
  
  function initialize() {
  
  
  var mapOptions = {
  center: new google.maps.LatLng(-38.255338, 144.34334),
  zoom: 10,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  draggable: true,
  zoomControl: true,
  scrollwheel: false,
  disableDefaultUI: true,
  };
  
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
    var location = new google.maps.LatLng(-38.272048, 144.479249);
    var icon1 =   'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/ISO_7010_E003_-_First_aid_sign.svg/2000px-ISO_7010_E003_-_First_aid_sign.svg.png';
  
  var markerImage1 = {
    url: icon1,
    scaledSize: new google.maps.Size(25, 25),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(10, 12)
  };
  var marker = new google.maps.Marker({
    position: location,
    map: map,
    icon: markerImage1
  });
  }
  initialize();
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#map {
  background-color: #000;
  height: 500px;
  margin: 0 auto;
  width: 350px;
  }
  </code></pre>