Google Maps Javascript API V3无法正常工作

Question

I have this on the of my .php file 我的.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>

and along the page I have the div in a modal 并在页面上将div放在模式中

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

But the map does not show in the modal... I get no errors on Opera Console and when I try to call the functions [initialize() and or codeAddress("Spain")] through the console it says undifined 但是地图未显示在模式中...我在Opera Console上没有任何错误，当我尝试通过控制台调用函数[initialize（）和or codeAddress（“ Spain”）]时，它说未定义

I've created a page only for the map for testing and it worked fine. 我只为地图创建了一个页面进行测试，并且效果很好。 Any ideas? 有任何想法吗？ ==EDIT== After adding the height to my css file the map is shown with some problems http://postimg.org/image/mhj9awdez/ Only after a second initialization the map is shown correctly (the initialization must be done with the modal open) ==编辑==将高度添加到我的css文件后，地图显示有一些问题http://postimg.org/image/mhj9awdez/仅在第二次初始化后，地图才能正确显示（初始化必须使用模态开放

Answer 1

you need to call initialize() function after the loading the js file ... i think this will help you <https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';>> 您需要在加载js文件后调用initialize（）函数...我认为这将对您有所帮助<https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&'+' callback = initialize'; >>

<!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 个解决方案

解决方案1
0 2014-02-24 15:14:04

Google Maps Javascript API V3无法正常工作

问题描述

1 个解决方案

解决方案1 0 2014-02-24 15:14:04

解决方案1
0 2014-02-24 15:14:04