google maps v3 drawing (Google sample does not load map)

Question

New to JS and programming in general. I wish to learn more about GMaps' Drawing tools. 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. 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 drawing (Google sample does not load map)

Question

1 answers

solution1
1 ACCPTED 2013-09-15 17:30:33

google maps v3 drawing (Google sample does not load map)

Question

1 answers

solution1 1 ACCPTED 2013-09-15 17:30:33

solution1
1 ACCPTED 2013-09-15 17:30:33