CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Deathshoo7
Deathshoo7

Reputation: 325

Google Maps Api Drawing a Circle

Hi i've a problem with Google maps api, i'am using the library Drawing and don't know if this is normal but when i am using Circle Drawing at the moment to start to draw this don't appear in the map only appear when the circle is completed, but the other controller like polygon or rectangle it's appear in the momento to start to draw, i did copy the example that google maps api have in their page and happen the same..

Some solution.. Thanks for the help.

This is code from Google maps API 

<!DOCTYPE html>
<html>
  <head>
    <title>Drawing tools</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 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
  };

  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: '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>

Upvotes: 0

Views: 2369

Answers (1)

Deep Mehta
Deep Mehta

Reputation: 1280

Try this code after your map is loaded. Its working for me.

var rad=9;
var draw_circle=null;
draw_circle = new google.maps.Circle({
                                     center: new google.maps.LatLng(32.0833, 34.8000),
                                     radius: rad,
                                     strokeColor: "#FFFFFF",
                                     strokeOpacity: 0.8,
                                     strokeWeight: 2,
                                     fillColor: "#FFFFFF",
                                     fillOpacity: 0.35,
                                     map: map
                                     });

Hope it helps.!

Upvotes: 1

Related Questions