Карта Google на моем веб-сайте не работает, если я свяжу свой css

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

индекс.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>

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

Кажется, проблема связана с вашим сбросом полей и отступов - удалите это правило *, и оно решит вашу проблему - вы также можете удалить свой ключ API из вопроса

— 18.03.2019 17:55

В частности, ваш overflow:auto удалите это — его не нужно добавлять к каждому элементу.

— 18.03.2019 17:59

javascript html css google-maps google-api

18.03.2019 17:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

18.03.2019 18:00

Другие вопросы по теме

Как я могу заставить эту простую форму работать правильно?

Поверните Div, нажав на другой Div

Добавить видео Dropbox на веб-страницу html

CSS Наведение только на текст?

Создать цикл for с изменяющимся изображением

Сделать раскрывающийся список выбора обязательным с помощью jQuery

Столбцы Flexbox в порядке возрастания

CSS: дизайн «Bleeding edge». Как?

Как связать все страницы и исключить текущую страницу в PHP

Где я могу получить все ссылки на спецификации CSS-элементов и свойств, перечисленные для каждого тега HTML (XHTML)?

Карта Google на моем веб-сайте не работает, если я свяжу свой css

Ответы 1

Другие вопросы по теме

Похожие вопросы