Инструменты рисования на картах Google v3

Question

var map; 
     var markersArray = []; 
     var myCoordsLenght = 10; 



function initialize() { 
      var markers = []; 

      var myOptions = { 
       zoom: 16, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 

      }; 

      map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 


      var defaultBounds = new google.maps.LatLngBounds(//default lat and long 
        new google.maps.LatLng(40.1889, 19.0548), 
        new google.maps.LatLng(34.7659, 28.7118)); 
      map.fitBounds(defaultBounds); 





      google.maps.event.addListener(map, "click", function(event) // click listener on map 
      { 
       placeMarker(event.latLng);        // place inv marker 

       // display the lat/lng in your form's lat/lng fields 
      document.getElementById('latFld').value = event.latLng.lat().toFixed(myCoordsLenght); 
       document.getElementById('lngFld').value = event.latLng.lng().toFixed(myCoordsLenght); 
      }); 
      // Create the search box and link it to the UI element. 
      var input = /** @type {HTMLInputElement} */(
        document.getElementById('pac-input')); 
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
      var searchBox = new google.maps.places.SearchBox(
        /** @type {HTMLInputElement} */(input)); 

      // [START region_getplaces] 
      // Listen for the event fired when the user selects an item from the 
      // pick list. Retrieve the matching places for that item. 
      google.maps.event.addListener(searchBox, 'places_changed', function() { 
       var places = searchBox.getPlaces(); 
       // fixed zoom size 
       var listener = google.maps.event.addListener(map, "idle", function() { 
        if (map.getZoom() > 16) 
         map.setZoom(16); 
        google.maps.event.removeListener(listener); 
       }); 
       for (var i = 0, marker; marker = markers[i]; i++) { 
        marker.setMap(null); 
       } 
       markers = []; 
       var bounds = new google.maps.LatLngBounds(); 
       for (var i = 0, place; place = places[i]; i++) { 
        bounds.extend(place.geometry.location); 
       } 
       map.fitBounds(bounds); 
      }); 
      // [END region_getplaces] 
      // Bias the SearchBox results towards places that are within the bounds of the 
      // current map's viewport. 
      google.maps.event.addListener(map, 'bounds_changed', function() { 
       var bounds = map.getBounds(); 
       searchBox.setBounds(bounds); 
      }); 



     } 

     function placeMarker(location) { 
     // first remove all markers if there are any 
      deleteOverlays(); 
      var marker = new google.maps.Marker({ 
       position: location, 
       map: map, 
       draggable: true, 
       animation: google.maps.Animation.DROP 
      }); 
      // add marker in markers array 
      markersArray.push(marker); 
      //map.setCenter(location); 
      // adds a listener to the marker 
      // gets the coords when drag event ends 
      // then updates the input with the new coords 
      google.maps.event.addListener(marker, 'dragend', function(evt) { 
       document.getElementById('latFld').value = evt.latLng.lat().toFixed(myCoordsLenght); 
       document.getElementById('lngFld').value = evt.latLng.lng().toFixed(myCoordsLenght); 
      }) 
     } 
     // Deletes all markers in the array by removing references to them 
     function deleteOverlays() { 
      if (markersArray) { 
       for (i in markersArray) { 
        markersArray[i].setMap(null); 
       } 
       markersArray.length = 0; 
      } 
     } 


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

Я хочу добавить инструменты рисования, чтобы выбрать области, и также хочу отслеживать положение маркеров внутри отмеченной области .. Проблема в том, что я не могу добавить это код https://developers.google.com/maps/documentation/javascript/examples/drawing-tools внутри моего образца кода! благодаря

Answer 1

В вашем Initialize просто инстанцируете drawmanager после того, как экземпляр карты так же, как в примере:

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);