var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

var mapOptions = {

  zoom: 4,

  center: myLatlng,

  mapTypeId: google.maps.MapTypeId.ROADMAP,

}

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  

var marker = new google.maps.Marker({

    position: myLatlng,

    title:"Hello World!"

});  

// To add the marker to the map, call setMap();

marker.setMap(map);  

function initialize() {

  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

  var mapOptions = {

    zoom: 4,

    center: myLatlng,

    mapTypeId: google.maps.MapTypeId.ROADMAP

  }

  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  

  var image = 'beachflag.png';

  var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);

  var beachMarker = new google.maps.Marker({

      position: myLatLng,

      map: map,

      icon: image

  });

}  

function initialize() {

  var mapOptions = {

    zoom: 10,

    center: new google.maps.LatLng(-33.9, 151.2),

    mapTypeId: google.maps.MapTypeId.ROADMAP

  }

  var map = new google.maps.Map(document.getElementById("map_canvas"),

                                mapOptions);  

  setMarkers(map, beaches);

}  

/**

 * Data for the markers consisting of a name, a LatLng and a zIndex for

 * the order in which these markers should display on top of each

 * other.

 */

var beaches = [

  ['Bondi Beach', -33.890542, 151.274856, 4],

  ['Coogee Beach', -33.923036, 151.259052, 5],

  ['Cronulla Beach', -34.028249, 151.157507, 3],

  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

  ['Maroubra Beach', -33.950198, 151.259302, 1]

];  

function setMarkers(map, locations) {

  // Add markers to the map  

  // Marker sizes are expressed as a Size of X,Y

  // where the origin of the image (0,0) is located

  // in the top left of the image.  

  // Origins, anchor positions and coordinates of the marker

  // increase in the X direction to the right and in

  // the Y direction down.

  var image = new google.maps.MarkerImage('images/beachflag.png',

      // This marker is 20 pixels wide by 32 pixels tall.

      new google.maps.Size(20, 32),

      // The origin for this image is 0,0.

      new google.maps.Point(0,0),

      // The anchor for this image is the base of the flagpole at 0,32.

      new google.maps.Point(0, 32));

  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',

      // The shadow image is larger in the horizontal dimension

      // while the position and offset are the same as for the main image.

      new google.maps.Size(37, 32),

      new google.maps.Point(0,0),

      new google.maps.Point(0, 32));

      // Shapes define the clickable region of the icon.

      // The type defines an HTML <area> element 'poly' which

      // traces out a polygon as a series of X,Y points. The final

      // coordinate closes the poly by connecting to the first

      // coordinate.

  var shape = {

      coord: [1, 1, 1, 20, 18, 20, 18 , 1],

      type: 'poly'

  };

  for (var i = 0; i < locations.length; i++) {

    var beach = locations[i];

    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);

    var marker = new google.maps.Marker({

        position: myLatLng,

        map: map,

        shadow: shadow,

        icon: image,

        shape: shape,

        title: beach[0],

        zIndex: beach[3]

    });

  }

}  

marker = new google.maps.Marker({

  position: new google.maps.LatLng(-25.363882, 131.044922),

  icon: {

    path: google.maps.SymbolPath.CIRCLE,

    scale: 10

  },

  draggable: true,

  map: map

});  

function initialize() {

  var myLatLng = new google.maps.LatLng(0, -180);

  var mapOptions = {

    zoom: 3,

    center: myLatLng,

    mapTypeId: google.maps.MapTypeId.TERRAIN

  };  

  var map = new google.maps.Map(document.getElementById("map_canvas"),

      mapOptions);

  var flightPlanCoordinates = [

    new google.maps.LatLng(37.772323, -122.214897),

    new google.maps.LatLng(21.291982, -157.821856),

    new google.maps.LatLng(-18.142599, 178.431),

    new google.maps.LatLng(-27.46758, 153.027892)

  ];

  var flightPath = new google.maps.Polyline({

    path: flightPlanCoordinates,

    strokeColor: "#FF0000",

    strokeOpacity: 1.0,

    strokeWeight: 2

  });  

  flightPath.setMap(map);

}  

var poly;

var map;  

function initialize() {

  var chicago = new google.maps.LatLng(41.879535, -87.624333);

  var mapOptions = {

    zoom: 7,

    center: chicago,

    mapTypeId: google.maps.MapTypeId.ROADMAP

  };  

  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);  

  var polyOptions = {

    strokeColor: '#000000',

    strokeOpacity: 1.0,

    strokeWeight: 3

  }

  poly = new google.maps.Polyline(polyOptions);

  poly.setMap(map);  

  // Add a listener for the click event

  google.maps.event.addListener(map, 'click', addLatLng);

}  

/**

 * Handles click events on a map, and adds a new point to the Polyline.

 * @param {MouseEvent} mouseEvent

 */

function addLatLng(event) {  

  var path = poly.getPath();  

  // Because path is an MVCArray, we can simply append a new coordinate

  // and it will automatically appear

  path.push(event.latLng);  

  // Add a new marker at the new plotted point on the polyline.

  var marker = new google.maps.Marker({

    position: event.latLng,

    title: '#' + path.getLength(),

    map: map

  });

}  

var lineCoordinates = [

  new google.maps.LatLng(22.291, 153.027),

  new google.maps.LatLng(18.291, 153.027)

];  

var lineSymbol = {

  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW

};  

var line = new google.maps.Polyline({

  path: lineCoordinates,

  icons: [{

    icon: lineSymbol,

    offset: '100%'

  }],

  map: map

});  

var lineCoordinates = [

  new google.maps.LatLng(22.291, 153.027),

  new google.maps.LatLng(18.291, 153.027)

];  

var lineSymbol = {

  path: 'M 0,-1 0,1',

  strokeOpacity: 1,

  scale: 4

};  

var line = new google.maps.Polyline({

  path: lineCoordinates,

  strokeOpacity: 0,

  icons: [{

    icon: lineSymbol,

    offset: '0',

    repeat: '20px'

  }],

  map: map

});  

var lineCoordinates = [

  new google.maps.LatLng(22.291, 153.027),

  new google.maps.LatLng(18.291, 153.027)

];  

var symbolOne = {

  path: 'M -2,0 0,-2 2,0 0,2 z',

  strokeColor: '#F00',

  fillColor: '#F00',

  fillOpacity: 1

};  

var symbolTwo = {

  path: 'M -2,-2 2,2 M 2,-2 -2,2',

  strokeColor: '#292',

  strokeWeight: 4

};  

var symbolThree = {

  path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',

  strokeColor: '#00F',

  rotation: 0

};  

var line = new google.maps.Polyline({

  path: lineCoordinates,

  icons: [{

    icon: symbolOne,

    offset: '0%'

    },{

      icon: symbolTwo,

      offset: '50%'

    },{

      icon: symbolThree,

      offset: '100%'

    }

  ],

  map: map

});  

var line;  

function initialize() {

  var mapOptions = {

    center: new google.maps.LatLng(20.291, 153.027),

    zoom: 6,

    mapTypeId: google.maps.MapTypeId.ROADMAP

  };  

  var map = new google.maps.Map(document.getElementById("map_canvas"),

      mapOptions);  

  var lineCoordinates = [

    new google.maps.LatLng(22.291, 153.027),

    new google.maps.LatLng(18.291, 153.027)

  ];  

  var lineSymbol = {

    path: google.maps.SymbolPath.CIRCLE,

    scale: 8,

    strokeColor: '#393'

  };  

  line = new google.maps.Polyline({

    path: lineCoordinates,

    icons: [{

      icon: lineSymbol,

      offset: '100%'

    }],

    map: map

  });

}  

function animateCircle() {

    var count = 0;

    offsetId = window.setInterval(function() {

      count = (count + 1) % 200;  

      var icons = line.get('icons');

      icons[0].offset = (count / 2) + '%';

      line.set('icons', icons);

  }, 20);

}  

多边形

与 Polyline 对象类似，Polygon 对象也是由一系列有序坐标组成的。不过，多边形不像折线一样有两个端点，而是定义闭合区域。与折线类似的是，您可以定义影响多边形轮廓的笔触；不同的是，您还可以定义多边形内的填充区域。

此外，Polygon 还可以展示复杂形状，其中包括不连续形状（多个多边形定义为一个多边形）、“圆环”（其中的多边形区域在多边形内显示为“岛状”）以及一个或多个多边形的交叉。因此，单个多边形可指定多条路径。

多边形选项

与折线类似，您可以定义多边形边缘（“笔触”）的自定义颜色、粗细和不透明度，以及封闭区域（“填充”）的自定义颜色和不透明度。颜色应以十六进制数字 HTML 样式表示。

由于多边形区域可能包括多条独立的路径，因此 Polygon 对象的 paths 属性可用于指定“一组数组”（其中每个数组都为 MVCArray 类型且分别定义一系列有序的 LatLng 坐标）。

不过，对于仅包含一条路径的简单多边形，为方便起见，您可以使用一组 LatLng 坐标来构造 Polygon。在构造完成并将此简单数组存储到 Polygon 的 paths 属性中后，Google Maps API 会将其转换为“一组数组”。此外，该 API 还提供了简单的 getPath() 方法以构造仅包含一条路径的简单多边形。

注意：如果您是用此方式构造多边形的，那么仍需要将路径处理为 MVCArray，以便检索多边形的相关值。

此外，多边形的 editable 属性用于定义此形状是否在地图上为用户可修改的。

以下代码段创建了一个表示百慕大三角的多边形：

function initialize() {

  var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);

  var mapOptions = {

    zoom: 5,

    center: myLatLng,

    mapTypeId: google.maps.MapTypeId.TERRAIN

  };  

  var bermudaTriangle;  

  var map = new google.maps.Map(document.getElementById("map_canvas"),

      mapOptions);  

  var triangleCoords = [

    new google.maps.LatLng(25.774252, -80.190262),

    new google.maps.LatLng(18.466465, -66.118292),

    new google.maps.LatLng(32.321384, -64.75737),

    new google.maps.LatLng(25.774252, -80.190262)

  ];  

  // Construct the polygon

  // Note that we don't specify an array or arrays, but instead just

  // a simple array of LatLngs in the paths property

  bermudaTriangle = new google.maps.Polygon({

    paths: triangleCoords,

    strokeColor: "#FF0000",

    strokeOpacity: 0.8,

    strokeWeight: 2,

    fillColor: "#FF0000",

    fillOpacity: 0.35

  });  

  bermudaTriangle.setMap(map);

}  

多边形自动完成

以上示例中的 Polygon 包含四个坐标，不过请注意，其中第一个坐标和最后一个坐标的位置相同，从而定义了一个环路。不过，实际上由于多边形定义的就是封闭区域，因此无需定义这最后一个坐标。对于任意给定路径，Maps API 将通过绘制连接最后一个坐标与第一个坐标的笔触来自动“封闭”任何多边形。

下例除了省略最后一个坐标之外，其他均与上例相同。

多边形数组

多边形会将其一系列坐标指定为一组数组，其中各数组都是 MVCArray 类型的。每个“子”数组都是一组 LatLng 坐标，用于指定单条路径。要检索这些坐标，请调用 Polygon的 getPaths() 方法。由于数组为 MVCArray，因此您需要使用以下方法来处理和检查该数组：

• getAt()，用于在给定的索引值（从零开始）处返回 LatLng。
• insertAt()，用于在给定的索引值（从零开始）处插入所传递的 LatLng。请注意，该索引值处的所有现有坐标均会向前移动。
• removeAt()，用于在给定的索引值（从零开始）处删除 LatLng。

请注意：要检索数组的第 i 个元素，请务必使用语法 mvcArray.getAt(i)，而不是只使用 mvcArray[i]。

以下代码通过显示多边形的坐标信息，对多边形的点击事件进行了处理：

var map;

var infoWindow;  

function initialize() {

  var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);

  var mapOptions = {

    zoom: 5,

    center: myLatLng,

    mapTypeId: google.maps.MapTypeId.TERRAIN

  };  

  var bermudaTriangle;  

  map = new google.maps.Map(document.getElementById("map_canvas"),

      mapOptions);  

  var triangleCoords = [

    new google.maps.LatLng(25.774252, -80.190262),

    new google.maps.LatLng(18.466465, -66.118292),

    new google.maps.LatLng(32.321384, -64.75737)

  ];  

  bermudaTriangle = new google.maps.Polygon({

    paths: triangleCoords,

    strokeColor: "#FF0000",

    strokeOpacity: 0.8,

    strokeWeight: 3,

    fillColor: "#FF0000",

    fillOpacity: 0.35

  });  

  bermudaTriangle.setMap(map);  

  // Add a listener for the click event

  google.maps.event.addListener(bermudaTriangle, 'click', showArrays);  

  infowindow = new google.maps.InfoWindow();

}  

function showArrays(event) {  

  // Since this Polygon only has one path, we can call getPath()

  // to return the MVCArray of LatLngs

  var vertices = this.getPath();  

  var contentString = "<b>Bermuda Triangle Polygon</b><br />";

  contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";  

  // Iterate over the vertices.

  for (var i =0; i < vertices.length; i++) {

    var xy = vertices.getAt(i);

    contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng();

  }  

  // Replace our Info Window's content and position

  infowindow.setContent(contentString);

  infowindow.setPosition(event.latLng);  

  infowindow.open(map);

}  

圆形和矩形

除了普通的 Polygon 类之外，JavaScript Maps API 还包含一些适用于 Circle 和 Rectangle 的特定类（用于简化其构造）。

圆形

Circle 与 Polygon 类似，您可以自定义圆形边缘（“笔触”）的颜色、粗细和透明度，以及封闭区域（“填充”）的颜色和透明度。颜色应以十六进制数字 HTML 样式表示。

与 Polygon 不同，您不应为 Circle 定义 paths；圆形有两个用于定义其形状的其他属性：

• center，用于指定圆心的 google.maps.LatLng。
• radius，用于指定圆形的半径（以米为单位）。

此外，圆形的 editable 属性用于定义此形状是否在地图上为用户可修改的。

以下代码段创建了用于表示美国人口的圆形：

// Create an object containing LatLng, population.

var citymap = {};

citymap['chicago'] = {

  center: new google.maps.LatLng(41.878113, -87.629798),

  population: 2842518

};

citymap['newyork'] = {

  center: new google.maps.LatLng(40.714352, -74.005973),

  population: 8143197

};

citymap['losangeles'] = {

  center: new google.maps.LatLng(34.052234, -118.243684),

  population: 3844829

}

var cityCircle;  

function initialize() {

  var mapOptions = {

    zoom: 4,

    center: new google.maps.LatLng(37.09024, -95.712891),

    mapTypeId: google.maps.MapTypeId.TERRAIN

  };  

  var map = new google.maps.Map(document.getElementById("map_canvas"),

      mapOptions);  

  for (var city in citymap) {

    // Construct the circle for each value in citymap. We scale population by 20.

    var populationOptions = {

      strokeColor: "#FF0000",

      strokeOpacity: 0.8,

      strokeWeight: 2,

      fillColor: "#FF0000",

      fillOpacity: 0.35,

      map: map,

      center: citymap[city].center,

      radius: citymap[city].population / 20

    };

    cityCircle = new google.maps.Circle(populationOptions);

  }

}  

矩形

Rectangle 与 Polygon 类似，您可以自定义矩形边缘（“笔触”）的颜色、粗细和透明度，以及封闭区域（“填充”）的颜色和透明度。颜色应以十六进制数字 HTML 样式表示。

与 Polygon 不同，您不应为 Rectangle 定义 paths；矩形还有一个用于定义其形状的 bounds 属性：

• bounds，用于指定矩形的 google.maps.LatLngBounds。

此外，矩形的 editable 属性用于定义此形状是否在地图上为用户可修改的。

以下示例针对任何 'zoom_changed' 事件分别根据前一个视口创建了矩形：

function initialize() {  

  var coachella = new google.maps.LatLng(33.6803003, -116.173894);

  var rectangle;  

  var mapOptions = {

    zoom: 11,

    center: coachella,

    mapTypeId: google.maps.MapTypeId.TERRAIN

  };  

  var map = new google.maps.Map(document.getElementById("map_canvas"),

      mapOptions);  

  rectangle = new google.maps.Rectangle();  

  google.maps.event.addListener(map, 'zoom_changed', function() {  

    // Get the current bounds, which reflect the bounds before the zoom.

    var rectOptions = {

      strokeColor: "#FF0000",

      strokeOpacity: 0.8,

      strokeWeight: 2,

      fillColor: "#FF0000",

      fillOpacity: 0.35,

      map: map,

      bounds: map.getBounds()

    };

    rectangle.setOptions(rectOptions);

  });

}  

用户可修改的形状

您可将任何形状的叠加层（折线、多边形、圆形和矩形）设为用户可修改，方法是在形状选项中将 editable 设为 true。

要将标记设为可拖动，请在标记选项中将 draggable 设为 true。

var circleOptions = {

  center: new google.maps.LatLng(-34.397, 150.644),

  radius: 25000,

  map: map,

  editable: true

};

var circle = new google.maps.Circle(circleOptions);  

将某种形状的叠加层设为可修改会增加对该形状的处理，从而允许用户直接在地图上对其进行重新定位、形状调整和/或大小调整。

用户在某个会话中针对对象所作出的更改不会适用于其他会话。如果您想要保存针对折线所作出的修改，请务必自行捕获并存储相关信息。

修改事件

如果对形状进行了修改，那么系统会在修改完毕后触发相关事件。下面列出了这些事件。

google.maps.event.addListener(circle, 'radius_changed', function() {

  radius = circle.getRadius();

});  

google.maps.event.addListener(outerPath, 'set_at', function() {

  print('Vertex moved on outer path.');

});  

google.maps.event.addListener(innerPath, 'insert_at', function() {

  print('Vertex removed from inner path.');

});