google maps v3绘图（Google示例不会加载地图）

Question

New to JS and programming in general. JS和一般编程新手。 I wish to learn more about GMaps' Drawing tools. 我希望了解有关GMaps绘图工具的更多信息。 To learn about GMaps, their own sample codes have this far been the best point to begin research and experimentation, but with drawing tools, it doesn't seem to be that way. 要了解GMaps，到目前为止，他们自己的示例代码一直是开始研究和实验的最佳点，但是对于绘图工具，似乎并非如此。 The sample code provided on their developers' site runs a blank page. 开发人员网站上提供的示例代码运行空白页。 This is probably a dumb question and the answer is obvious, but still, how do I fix this? 这可能是一个愚蠢的问题，答案很明显，但是，如何解决这个问题？

<!DOCTYPE html>
<html>
  <head>
    <title>Drawing tools</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
    <script>
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    markerOptions: {
      icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}

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

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

Compared to the original code, only the source of the marker image has been changed here. 与原始代码相比，此处仅更改了标记图像的来源。

Answer 1

You need to resize your map-canvas element. 您需要调整地图画布元素的大小。 Add the following to your stylesheet. 将以下内容添加到样式表中。

#map-canvas {display: block; height: 300px; width: 600px;}

and see if that does the trick. 看看是否能解决问题。

google maps v3绘图（Google示例不会加载地图）

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-09-15 17:30:33

google maps v3绘图（Google示例不会加载地图）

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-09-15 17:30:33

解决方案1
1 已采纳 2013-09-15 17:30:33