Question

＆＃13;

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
          });
        });
      }

＆＃13;

<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>

＆＃13;

Google map with custom marker

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

Answer 1

您应该像div#map那样设置尺寸：

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

根据您的需要进行调整。

Answer 2

删除所有外部div。只需删除并尝试您的代码工作。请参阅此问题：Google Maps doesn't work when inside a div

＆＃13;

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
          });
        });
      }

＆＃13;

/* 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;
      }

＆＃13;

<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>

＆＃13;

Answer 3

问题的关键在于将google地图与bootstrap集成。详细说明，你应该将地图标记的父div（.container-fluid）的css高度样式设置为100％;

为了让以下演示正常运行，您应该提供您的谷歌地图api密钥和标记的图片文件。

＆＃13;

<!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>

＆＃13;

PS：这是我第一次使用谷歌地图，所以也许有些代码很奇怪。我试过以下程序。

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

2.添加自定义标记。

3.与bootstrap整合。

希望它可以帮到你。

谷歌地图在网站内部无效

3 个答案: