How do I get rid of the chrome on an embedded Google map?

Question

I'm using the Google maps method of embedding a map in my page. Is it possible to get rid of the crossed out bits in the image?

This is the HTML that I'm using:

<div style="float: left; margin-right: 20px">
        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2466995.3196064606!2d-1.8564485!3d52.8552473!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4879960103837b17%3A0x8ddae75902857c2a!2sMansfield!5e0!3m2!1sen!2suk!4v1520339379553" width="300" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Possible duplicate of: https://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe — gdbj, Mar 06 '18 at 16:15

score 1 · Answer 1 · answered Mar 06 '18 at 16:15

There is an example in the docs: Disabling the default UI

Just set disableDefaultUI to true:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -33,
      lng: 151
    },
    disableDefaultUI: true
  });
}

#map {
  height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

How do I get rid of the chrome on an embedded Google map?

1 Answers1