Google地图未使用Geocode服务显示

问题描述:

我正在尝试使用地理编码服务,但由于某些原因,该地图未显示.当我检查开发者控制台时,它没有显示任何Javascript错误.

I am trying to use Geocode services but for some reason the map does not show up. When I checked the developer console it does not show any Javascript error.

这是Google地图以chrome显示的方式.

This is how the google map shows up in 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);
            })
        }

请勿使用Google Maps Javascript API v3的未记录属性.他们可以并且确实会在每个版本中进行更改. 始终使用记录的方法(.lat()、. lng()).

Do not use undocumented properties of the Google Maps Javascript API v3. They can and do change with every release. Always use the documented methods (.lat(), .lng()).

工作小提琴

代码段:

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>