Google 使用地理编码服务未显示地图

Question

我正在尝试使用地理编码服务，但由于某种原因地图没有显示。当我检查开发人员控制台时，它没有显示任何 Javascript 错误。

这就是 google 地图在 chrome 中的显示方式。

<!DOCTYPE html>
        <html>
          <head>
            <title>Simple Map</title>
            <meta name="viewport" content="initial-scale=1.0">
            <meta charset="utf-8">
            <style>
              html, body {
                height: 100%;
                margin: 0;
                padding: 0;
              }
            </style>

            <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
            <script src="\div.js"></script>
        [![enter image description here][1]][1]
            <script>
            google.maps.visualRefefresh = true;

        var map;
        function initialize() {
            getCoordinates('287 West Center Street Utah', function(coords) {
                var mapOptions = {
                center: new google.maps.LatLng(coords[0],coords[1]),
                zoom: 8
                };
            map = new google.maps.Map(document.getElementById('map'), mapOptions);
            })
        }

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

div.js

    geocoder = new google.maps.Geocoder();
        function getCoordinates(address,callback) {
            var coordinates;
            geocoder.geocode({address : address} , function (results,status){
                coords_obj = results[0].geometry.location;
                coordinates = [coords_obj.nb, coords_obj.ob];
                callback(coordinates);
            })
        }

Answer 1

编辑 1

改变这个：

function getCoordinates(address,callback) {
    var coordinates;
    geocoder.geocode({address : address} , function (results,status){
        coords_obj = results[0].geometry.location;
        coordinates = [coords_obj.nb, coords_obj.ob];
        callback(coordinates);
    })
}

为此：

function getCoordinates(address,callback) {
    var coordinates;
    geocoder.geocode({address : address} , function (results,status){
        coords_obj = results[0].geometry.location;
        coordinates = [coords_obj.H, coords_obj.L];
        callback(coordinates);
    })
}

你的错误：坐标=[coords_obj.nb,coords_obj.ob];

编辑 2

geocoder = new google.maps.Geocoder();

function getCoordinates(address, callback) {
  var coordinates;
  geocoder.geocode({
    address: address
  }, function(results, status) {
    coords_obj = results[0].geometry.location;
    console.log(coords_obj)
    coordinates = [coords_obj.H, coords_obj.L];
    callback(coordinates);
  })
}

google.maps.visualRefefresh = true;

var map;

function initialize() {
  getCoordinates('287 West Center Street Utah', function(coords) {
    var mapOptions = {
      center: new google.maps.LatLng(coords[0], coords[1]),
      zoom: 8
    };

    console.log(mapOptions)
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
  })
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

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

Answer 2

不要使用 Google 地图 Javascript API v3 的未记录的属性。他们可以并且确实会随着每次发布而改变。 始终使用记录的方法（.lat()、.lng()）。

working fiddle

代码片段::

google.maps.visualRefefresh = true;

var map;

function initialize() {
  getCoordinates('287 West Center Street Utah', function(coords) {
    var mapOptions = {
      center: new google.maps.LatLng(coords[0], coords[1]),
      zoom: 8
    };
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
  })

}

google.maps.event.addDomListener(window, 'load', initialize);
var geocoder = new google.maps.Geocoder();

function getCoordinates(address, callback) {
  var coordinates;
  geocoder.geocode({
    address: address
  }, function(results, status) {
    coords_obj = results[0].geometry.location;
    coordinates = [coords_obj.lat(), coords_obj.lng()];
    callback(coordinates);
  })
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="height:100%"></div>

Google 使用地理编码服务未显示地图

Google map does not show up using Geocode services

javascript

google-maps

google-geocoder