Question

我的.php文件

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 15,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress(address) {  
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

沿着页面我有一个模态的div

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

但是地图没有显示在模态中......我在Opera Console上没有出现任何错误，当我尝试通过控制台调用函数[initialize（）和/或codeAddress（“Spain”）]时，它表示未经解决的< / p>

我为地图创建了一个页面进行测试，效果很好。有任何想法吗？ == ==编辑将高度添加到我的css文件后，显示的地图存在一些问题 http://postimg.org/image/mhj9awdez/ 只有在第二次初始化后才能正确显示地图（初始化必须在模态打开的情况下完成）

Answer 1

加载js文件后需要调用initialize（）函数... 我想这会对你有所帮助＆LT; HTTPS：？//maps.googleapis.com/maps/api/js V = 3.exp＆安培;传感器=假安培;＆＃39; + ＆＃39;回调=初始化＆＃39 ;;＆GT;＆GT;

<!DOCTYPE html>
<html>
  <head>
    <title>Asynchronous Loading</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script>
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };

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

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Google Maps Javascript API V3无效

1 个答案: