Home/ Questions/Q 8301241
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T16:52:07+00:00

Simple problem, I copy and pasted the sample code of a Google Maps page

  • 0

Simple problem, I copy and pasted the sample code of a Google Maps page with a Drawing Manager attached. For some reason the drawing control is not loading on the top center of the screen. I took out my API key for security reasons. What’s the problem? Code is below.

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<meta charset="utf-8">

<style type="text/css"> 

html { height: 100% }

body { height: 100%; margin: 0px; padding: 0px }

#map_canvas { height: 100% }

</style> 

<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</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
        ]
      },
      markerOptions: {
        icon: 'images/beachflag.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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false&libraries=drawing"></script>

    You have to specifiy libraries=drawing. Tha page is not loading because you have the following error

    Cannot read property 'DrawingManager' of undefined
    • 0