javascript - 谷歌地图无法在网站内运行

Question

var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: new google.maps.LatLng(18.511325, 73.820176),
          mapTypeId: 'roadmap'
        });

        var iconBase = '';
        var icons = {
          info: {
            icon: iconBase + 'map.png'
          }
        };

        var features = [
          {
            position: new google.maps.LatLng(18.511325, 73.820176),
            type: 'info'
          }
        ];

        // Create markers.
        features.forEach(function(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
          });
        });
      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeuMlx32V1fYT3wRAa1wEjjtQuAI6wATM&callback=initMap">
    </script>
    
    <div class="container-fluid">
        <div class="row">
          <div id="map" style="width: 100%; height:100%"></div>
        </div>
    </div>

Google map with custom marker

您好，我在网站内使用 Google map 。我想添加我的 logo.png 而不是 Google 标记。我已从 Google 页面生成 key 并将其添加到脚本标记内。我已按照 Google 页面上给出的所有步骤进行操作，并为其编写了以下代码。但是当我使用以下代码时，它什么也没显示。我想设计与图中所示相同的布局。

Answer 1

删除所有外部 div。只需删除并尝试您的代码是否有效。引用这个问题:Google Maps doesn't work when inside a div

var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: new google.maps.LatLng(18.511325, 73.820176),
          mapTypeId: 'roadmap'
        });

        var iconBase = '';
        var icons = {
          info: {
            icon: iconBase + 'map.png'
          }
        };

        var features = [
          {
            position: new google.maps.LatLng(18.511325, 73.820176),
            type: 'info'
          }
        ];

        // Create markers.
        features.forEach(function(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
          });
        });
      }

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeuMlx32V1fYT3wRAa1wEjjtQuAI6wATM&callback=initMap">
    </script>
    
<div class="row"  style="width: 100%; height:100%">
 <div id="map"></div>
 </div>