Google Maps API Tutorial

© 2008, 2009 Mike Williams

 
Translate this page:

 

Using the EShapes extension

The EShapes extension provides a number of additional static methods for GPolyline and GPolygon for creating certain shapes. It also provides two functions that can help in the placement of such shapes.

Here's an example

Download eshapes.js and place it on your web site.

Load the Javascript code like this <script type="text/javascript" src="eshapes.js"></script> after loading the main API code.

Then use any of these methods to plot shapes on your map:

GPolyline.Circle()

Plots a circle with a specified centre and radius

Parameters
latlng Centre of the circle
radius Length of radius in metres
color Color parameter for polyline
weight Weight parameter for polyline
opacity Opacity parameter for polyline
opts Options parameter for polyline

GPolygon.Circle()

Plots a filled circle with a specified centre and radius

Parameters
latlng Centre of the circle
radius Length of radius in metres
strokeColor strokeColor parameter for polygon
strokeWeight strokeWeight parameter for polygon
strokeOpacity strokeOpacity parameter for polygon
fillColor fill Color parameter for polygon
fillOpacity fillOpacity parameter for polygon
opts Options parameter for polygon

GPolyline.RegularPoly()

Plots a regular polygon (e.g. pentagon, square, octagon) with a specified centre, radius, number of vertices, and rotation.

Parameters
latlng Centre of the shape
radius Length of radius in metres
vertexCount Number of vertices, e.g. 5 for a pentagon
rotation Degrees of rotation.
When zero or omitted the southern edge of the shape is horizontal
color Color parameter for polyline
weight Weight parameter for polyline
opacity Opacity parameter for polyline
opts Options parameter for polyline

GPolygon.RegularPoly()

Plots a filled regular polygon with a specified centre, radius, number of vertices, and rotation.

Parameters
latlng Centre of the shape
radius Length of radius in metres
vertexCount Number of vertices, e.g. 5 for a pentagon
rotation Degrees of rotation.
When zero or omitted the southern edge of the shape is horizontal
strokeColor strokeColor parameter for polygon
strokeWeight strokeWeight parameter for polygon
strokeOpacity strokeOpacity parameter for polygon
fillColor fill Color parameter for polygon
fillOpacity fillOpacity parameter for polygon
opts Options parameter for polygon

GPolyline.Star()

Plots a star shape.

Parameters
latlng Centre of the shape
radius1 Length of radius of odd points in metres
radius2 Length of radius of even points in metres
points Number of points, e.g. 5 for a pentagram
rotation Degrees of rotation.
When zero or omitted the first point points due North
color Color parameter for polyline
weight Weight parameter for polyline
opacity Opacity parameter for polyline
opts Options parameter for polyline

GPolygon.Star()

Plots a filled star shape.

Parameters
latlng Centre of the shape
radius1 Length of radius of odd points in metres
radius2 Length of radius of even points in metres
points Number of points, e.g. 5 for a pentagram
rotation Degrees of rotation.
When zero or omitted the first point points due North
strokeColor strokeColor parameter for polygon
strokeWeight strokeWeight parameter for polygon
strokeOpacity strokeOpacity parameter for polygon
fillColor fill Color parameter for polygon
fillOpacity fillOpacity parameter for polygon
opts Options parameter for polygon

GPolyline.Ellipse()

Plots an ellipse.

Parameters
latlng Centre of the shape
radius1 Length of radius in the first direction
radius2 Length of radius in the second direction
rotation Degrees of rotation.
When zero or omitted the first direction is due North
color Color parameter for polyline
weight Weight parameter for polyline
opacity Opacity parameter for polyline
opts Options parameter for polyline

GPolygon.Ellipse()

Plots a filled ellipse.

Parameters
latlng Centre of the shape
radius1 Length of radius in the first direction
radius2 Length of radius in the second direction
rotation Degrees of rotation.
When zero or omitted the first direction is due North
strokeColor strokeColor parameter for polygon
strokeWeight strokeWeight parameter for polygon
strokeOpacity strokeOpacity parameter for polygon
fillColor fill Color parameter for polygon
fillOpacity fillOpacity parameter for polygon
opts Options parameter for polygon

GPolyline.Shape()

Plots a shape.

All other line shapes available in this extension are implemented by a call to this function. You could also use it to create slightly more complicated shapes.

Parameters
latlng Centre of the shape
radius1 Length of radius for odd points in the first direction
radius2 Length of radius for even points in the first direction
radius3 Length of radius for odd points in the second direction
radius4 Length of radius for even points in the second direction
rotation Degrees of rotation.
When zero or omitted the first direction is due North
vertexCount Number of vertices
color Color parameter for polyline
weight Weight parameter for polyline
opacity Opacity parameter for polyline
opts Options parameter for polyline
tilt boolean: if true, the shape is pre-rotated by 180/vertexCount
(This is used to make a 4-sided regular poly look like a square instead of a diamond.)

GPolygon.Shape()

Plots a filled shape.

Parameters
latlng Centre of the shape
radius1 Length of radius for odd points in the first direction
radius2 Length of radius for even points in the first direction
radius3 Length of radius for odd points in the second direction
radius4 Length of radius for even points in the second direction
rotation Degrees of rotation.
When zero or omitted the first direction is due North
vertexCount Number of vertices
strokeColor strokeColor parameter for polygon
strokeWeight strokeWeight parameter for polygon
strokeOpacity strokeOpacity parameter for polygon
fillColor fill Color parameter for polygon
fillOpacity fillOpacity parameter for polygon
opts Options parameter for polygon
tilt boolean: if true, the shape is pre-rotated by 180/vertexCount
(This is used to make a 4-sided regular poly look like a square insetad of a diamond.)

EOffset()

Returns the GLatLng of a location offset by a specified distance east and north.
This can be useful for aligning nearby shapes, e.g. when creating a hex grid on a wargaming map.

Parameters
latlng Starting Point
easting Distance east in metres
northing Distance north in metres

EOffsetBearing()

Returns the GLatLng of a location offset by a specified distance and bearing.
This can be useful for aligning nearby shapes, e.g. when creating a hex grid on a wargaming map.

Parameters
latlng Starting Point
radius Distance in metres
bearing Bearing in degrees

Here's an example

Back to Mike's Homepage
Up to the start of this tutorial