谷歌地图在网站内不起作用答案

【问题标题】：google map is not working inside website谷歌地图在网站内不起作用
【发布时间】：2017-11-27 18:14:47
【问题描述】：

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

你好，我在我的网站中使用谷歌地图。我想添加我的 logo.png 而不是谷歌标记。我已经从谷歌页面生成了密钥并将其添加到脚本标签中。我已经按照谷歌页面上给出的所有步骤为它编写了下面的代码。但是当我使用下面的代码时，它什么也没显示。我想设计与图片相同的布局。

【问题讨论】：

你的控制台的输出是什么意思？ Maps API 只能用于通过 HTTPS 提供的页面。
你的js在哪里？如果我将它放在 html 中的
在同一页面中
我也把代码放在了脚本标签中
高度为 0 像素

标签： javascript jquery twitter-bootstrap css google-maps-markers

【解决方案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>

【讨论】：

它在另一个页面中工作，但是当我在
的项目中添加此代码时，它不起作用

【解决方案2】：

你应该像这样为你的div#map 设置一个大小：

#map1 {
  height: 100%;
  width: 100%;
}

当然根据你的需要进行调整。

【讨论】：

我添加了#map { height: 100%;宽度：100%； } 但它不工作
像这样尝试内联：<div id="map" style="width: 100%; height:100%"></div>
@LakhanKhandelwal 你只尝试过 jsfiddle 吗？您是否也在真正的浏览器上尝试过？
@LakhanKhandelwal 在 jsfiddle 上，当我尝试时它不起作用。但在 jsbin 上确实如此。现在它不再有效，但与此同时您的 API 密钥仍然有效吗？另外，不要忘记使用 #map1，因为在您提供的代码中，您将 id 设置为 map1 而不是 map。

【解决方案3】：

你的问题的症结在于将google map与bootstrap集成。具体来说，你应该将map标签的父div（.container-fluid）的css高度样式设置为100%；

为了让下面的demo正常运行，你需要提供你的google map api key和你的marker图片文件。

<!DOCTYPE html>
<html>

<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        /* 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,
        .container-fluid {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div id="map"></div>
    </div>
    <script>
        var map;

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: 26.880,
                    lng: 112.644
                },
                zoom: 8
            });

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(26.880, 112.644),
                map: map,
                draggable: true,
                icon: '/images/github-youtube.jpg'// your image file path
            });

            marker.setMap(map);
        }
    </script>

    <!-- your google map api key : xxxx-->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>

</html>

PS：这是我第一次使用google maps，所以可能有些代码很奇怪。我尝试了以下过程。

1.查看谷歌地图入门页面。

2.添加自定义标记。

3.与引导程序集成。

希望对你有帮助。

【讨论】：