Code Snippet Library
accessing arguments in UI events add controls add state to controls adsense map ad unit adsense map ad unit formats advanced custom styling animate symbol arrows asynchronous loading auto-complete polygon bicycle layer circle overlays complex icons complex polyline control options control positioning custom controls custom info boxes custom map projections custom style map custom symbols dashed lines directions service directions service (advanced) directions service (draggable) directions service with text directions directions service with travel modes directions service with waypoints disable the default UI distance matrix service draggable polygons drawing tools elevations along a path elevation service fusion table layer fusion table layer with heatmap fusion table layer with query fusion table layer with styling geocoding service geolocation geometry encoding methods geometry navigation functions heading geoRSS layer get the new google maps styling getting properties with event handlers ground overlays heatmap layer info window with max width kml layer kml layer with events languages listening to DOM events localize map marker animations marker animations with setTimeout() overlays panoramio layer panoramio layer (restrict photos by tag) panoramio widget api place details place searches polygon array recatangles region code biasing (ES) region code biasing (US) remove overlay reverse geocoding show & hide overlays show pixel and tile coordinates simple click event simple icons simple info window simple map simple map with visual refresh enabled simple markers simple polygon simple polylines simple styled map street view controls street view data access street view events street view panoramas street view panorama tiles street view service traffic layer transit layer user-editable shapes using closures in event listeners weather layer

draggable polygons

Create draggable polygons.

function initialize() {

  var mapOptions = {
    zoom: 1,
    center: new google.maps.LatLng(24.886, -70.268),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

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

  var redCoords = [
      new google.maps.LatLng(25.774, -80.190),
      new google.maps.LatLng(18.466, -66.118),
      new google.maps.LatLng(32.321, -64.757)
  ];

  var blueCoords = [
      new google.maps.LatLng(25.774, -60.190),
      new google.maps.LatLng(18.466, -46.118),
      new google.maps.LatLng(32.321, -44.757)
  ];

   Construct the red polygon
  new google.maps.Polygon({
    map: map,
    paths: redCoords,
    strokeColor: \'#FF0000\',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: \'#FF0000\',
    fillOpacity: 0.35,
    draggable: true,
    geodesic: true
  });

   Construct the blue polygon
  new google.maps.Polygon({
    map: map,
    paths: blueCoords,
    strokeColor: \'#0000FF\',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: \'#0000FF\',
    fillOpacity: 0.35,
    draggable: true,
    geodesic: false
  });
}

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