Карта Google внутри моего сайта не работает, если я связываю свою CSS - PullRequest
Новая
       13

Карта Google внутри моего сайта не работает, если я связываю свою CSS

0 голосов
/ 18 марта 2019

В настоящее время я создаю веб-сайт, и у меня возникают проблемы с картой (я использую google maps api), только когда я добавляю css, я пытался искать и исследовать себя, и единственное, что уместно, было то, что, если я удалю ссылку на моя таблица стилей это удивительно работает

index.css: 

* {
  margin: 0;
  padding: 0;
  overflow: auto;
}

.left {
  float: left;
}

.right {
  float: right;
}


/* Header */

header {
  position: relative;
  background-color: #FFFFFF;
}

header nav {
  background-color: #FFFFFF;
  padding: 2em;
}

img.logo {
  max-width: 100px;
  height: auto;
  position: relative;
  padding-right: 2.5em;
  padding-left: 2.5em;
  display: block;
  color: #FFFFFF;
}

header nav ul {
  font-size: 1.5em;
}

ul:hover {
  border-bottom-style: solid;
  border-bottom-color: #00aa00;
  border-bottom-width: 3px;
}

header nav ul a {
  padding: 1em;
  vertical-align: middle;
  text-decoration: none;
  padding-right: 2.5em;
  padding-left: 2.5em;
  display: block;
  color: #00aa00;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
  <style>
    /* Set the size of the div element that contains the map */
    
    #map {
      height: 400px;
      /* The height is 400 pixels */
      width: 100%;
      /* The width is the width of the web page */
    }
  </style>
  <meta charset="UTF-8">
  <title>Trium</title>

</head>

<body>
  <h3>My Google Maps Demo</h3>
  <div id="map"></div>
  <script>
    function initMap() {

      var uluru = {
        lat: -25.344,
        lng: 131.036
      };

      var map = new google.maps.Map(
        document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });

      var marker = new google.maps.Marker({
        position: uluru,
        map: map
      });
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9iEOQtdERdBOcdQz7zywVPXaJ6jMfNQE&callback=initMap">
  </script>
</body>

</html>

Это должно быть глупый вопрос для некоторых людей, но я не могу заставить его работать

1 Ответ

0 голосов
/ 18 марта 2019

Кажется, что overflow: auto на всех элементах отображает карту Google.Это должно работать. 

#map{
    height: 400px;
    width: 100%;
    overflow: visible !important;
}
...