没有错误，但地图没有在 js 网站中显示，只有背景部分可见，答案

【问题标题】：No errors but map is not showing in website in js only background part is visible ,没有错误，但地图没有在 js 网站中显示，只有背景部分可见，
【发布时间】：2016-05-07 08:55:39
【问题描述】：

在尝试了很多之后，我已经应用了以前的答案，但没有得到正确的解决方案。实际上，我希望当用户输入位置地址时，我的代码必须在 web 的地图上显示该地址。但它没有发生。

convert.js :-

geocoder=new google.maps.Geocoder();
function getCoordinates(address,callback)
{
    var coordinates;
    geocoder.geocode({address:address},function(results,status){
        alert('Called');
        coordsx=results[0].geometry.location;
        //coords1=results[0].geometry.location;
        coordinates=[coordsx.lat(),coordsx.lng()];
        callback(coordinates);
        //alert(coordinates)
    })

}

testmap.html

<!DOCTYPE html>
<html>
  <head>
  <title></title>
    <style>
      #map-canvas {
        width: 700px;
        height: 600px;
        position: absolute;
        top: 40px;
        left: 360px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="convert.js"></script>
    <script>
    google.maps.visualRefresh=true;
      function initialize() {
      var mapOptions;
      getCoordinates('J-24 MIG colony indore',function(coords){
      mapOptions = {
          center: new google.maps.LatLng(coords[0],coords[1]),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
       } 
       //map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
      alert('Func')
      alert(mapOptions.center);
      });
       map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas" height="100%" width="100%%"></div>
  </body>
</html>

【问题讨论】：

你的坐标正确吗？
是的，我得到了正确的坐标

标签： javascript html google-maps

【解决方案1】：

map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 行需要在定义 mapOptions 的匿名函数 function(coords){.. 内。这应该有效：

<!DOCTYPE html>
<html>
  <head>
  <title></title>
    <style>
      #map-canvas {
        width: 700px;
        height: 600px;
        position: absolute;
        top: 40px;
        left: 360px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="convert.js"></script>
    <script>
    google.maps.visualRefresh=true;
      function initialize() {
      var mapOptions;
      getCoordinates('J-24 MIG colony indore',function(coords){
      mapOptions = {
          center: new google.maps.LatLng(coords[0],coords[1]),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
       } 
      map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
      });


      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas" height="100%" width="100%%"></div>
  </body>
</html>

【讨论】：

【解决方案2】：

问题是您没有放置地图对象，所以碰巧尝试将它们放入您的代码中，

map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

一定会成功的

【讨论】：