谷歌地图未在地图上显示地图和标记答案

【问题标题】：Google Map not displaying map and marker on the map谷歌地图未在地图上显示地图和标记
【发布时间】：2015-12-06 14:26:19
【问题描述】：

我正在尝试在谷歌地图上显示纬度和经度。使用我的代码，我得到了带有谷歌地图的空框。

这是我显示数据的 div 标签。

 <div id="map"></div>

这里是html页面上调用定位函数的按钮

<td><button type="button" class="btn btn-primary" ng-click="MyMap(record.id ,record.coordinates)">{{record.coordinates}} </button>

这是我试图在谷歌地图上显示标记的功能。

     $scope.MyMap=function(id,coordinates)
        {

                console.log(id,coordinates);
                locate(coordinates);


        }
    function locate(coordinates) {
        console.log(coordinates);
  var myLatlng = new google.maps.LatLng(coordinates[1], coordinates[0]);
  var map = new google.maps.Map(
    document.getElementById("map"), {
      center: myLatlng,
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map
  })

}

当我点击按钮时，我在地图 div 中看到了一个空的灰色框。问题出在哪里

【问题讨论】：

标签： javascript angularjs google-maps

【解决方案1】：

可能是您没有为地图 div 分配维度（这在谷歌地图中是强制性的）

试试这个方法

 <div id="map" style="height: 400px; width: 400px;"></div>

【讨论】：