rich22 rich22 - 3 months ago 16
CSS Question

Receiving strange columns/shapes on Google Maps

I'm trying to recreate a basic Hello World in Google Maps. I have been trying for the last hour to figure out what the problem is, but just cannot. When trying to give a map, it gives the map with the map/satellite buttons inappropriately styled(way too large), along with a white box at the bottom of the page. I would like to have the button normally styled, as well as the white box gone.

The following is my jsFIddle: https://jsfiddle.net/rich22/m84kwtwv/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

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

div{
height: 70%;
}
</style>

</head>

<body>

<div id="map"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAT4rwfJEdapVoq-EvUDeFjquATnLnhYZI&callback=initMap"
type="text/javascript"></script>
<script>

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: -33, lng: 151},
mapTypeControl: true,
scaleControl: true
});
}
</script>

</body>
</html>

Answer

Your css isn't doing what you want. This rule affects all div elements:

div {
height: 70%;
}

Change it to (if you only want it to affect the "map" div):

#map {
height: 70%;
}

updated fiddle

code snippet:

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 70%;
}
<div id="map"></div>
<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: {
        lat: -33,
        lng: 151
      },
      mapTypeControl: true,
      scaleControl: true
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAT4rwfJEdapVoq-EvUDeFjquATnLnhYZI&callback=initMap" type="text/javascript">