Google Map Shape Display

Adding polylines

PolylineThe constructor has a set of coordinates for the specified line LatLng PolylineOptions , and a set of styles for adjusting the visual behavior of the polyline.

PolylineThe object is plotted on the map as a series of straight line segments. You can specify custom colors, weights, and opacity for line drawing at the time you build lines PolylineOptions , or you can change them after you build them. Polylines support the following stroke styles:

• strokeColorSpecifies "#FFFFFF" the hexadecimal HTML color for the format. Polylineclass does not support named colors.
• strokeOpacitySpecifies a 0.0 value between and to 1.0 determine the opacity of the line color. The default value is 1.0 .
• strokeWeightSpecifies the width, in pixels, of the line.

The properties of the polyline editable specify whether the user can edit the shape. Similarly, you can also set draggable properties to allow users to drag lines.

All drawings have editable properties and draggable properties

To remove a polyline

To remove a polyline from a map, call the setMap() method and pass null it as its argument. In the following example, flightPath a Polyline object is:

Flightpath.  Setmap(null);    

Note that the above method does not delete polylines, but only removes polylines from the map. If you actually want to delete a polyline, you should remove it from the map first, and then set the polyline itself to null .

Check for Polylines

A polyline specifies a LatLng series of coordinates as an array of objects. These coordinates determine the path of the line. To retrieve these coordinates, call getPath() , which returns MVCArray an array of types. You can manipulate and inspect the array using the following operations:

• getAt()Returns the value at the given zero-based index LatLng .
• insertAt()The pass is inserted at the given index value at zero for the starting point LatLng . Notice that any existing coordinates at the index value are moved forward.
• removeAt()Removes the given index value at zero for the starting point LatLng .

Note : You cannot mvcArray[i] retrieve the first element of an array directly by using syntax. You must use the mvcArray.getAt(i) .

This example creates an interactive map which constructs a polyline based on
User clicks. Note that the polyline only appears once it path property
Contains LATLNG coordinates.

VarPoly;
VarMap;

functionInitmap() {
Map= NewGoogle.Maps.Map(Document.getElementById(' Map '), {
Zoom: 7,
Center: {Lat: 41.879,Lng: -87.624}Center the map on Chicago, USA.
});

Poly= NewGoogle.Maps.Polyline({
Strokecolor: ' #000000 ',
Strokeopacity: 1.0,
Strokeweight: 3
});
Poly.Setmap(Map);

ADD a listener for the Click event
Map.AddListener(' Click ',Addlatlng);
}

Handles Click events on a map, and adds a new point to the Polyline.
functionAddlatlng(Event) {
 VarPath=Poly.GetPath();

Because path is an mvcarray, we can simply append a new coordinate
And it'll automatically appear.
Path.Push(Event.Latlng);

Add a new marker at the new plotted point on the polyline.
VarMarker= new Google.. Marker ({ 
     Position: event., 
     Title:  ' # '  + Path. (),  
     Map: map 
   });  
 } 
         /span>                

View the example (polyline-complex.html).

Custom Polylines

You can add a vector-based image of the symbol form to a polyline. You can use a combination of symbols and PolylineOptions classes to give you full control over the appearance of the polyline on your map. See symbols for information about arrows, dashed lines, custom symbols, and animated symbols.

Other drawings can be used according to the use of multiple segments and methods

-----------------------------------------------------Ornate Split Line ( The following is the instance code)--------------------------------------------------------------

Line Stroke
var flightplancoordinates = [
{lat:36.075620815001415, lng:120.43020844459534},
{lat:36.074025246504746, lng:120.4285454750061},
{lat:36.069949462636, lng:120.43118476867676},
{lat:36.06604691846644, lng:120.42285919189453},
{lat:36.074025246504746, lng:120.4139757156372},
];
var flightpath = new Google.maps.Polyline ({
Path:flightplancoordinates,
Geodesic:true,
Strokecolor: ' #FF0000 ',
strokeopacity:1.0,
Strokeweight:2
});

Flightpath.setmap (map);

var workstart = new Google.maps.Marker ({
Position:flightplancoordinates[0],
Label: "Up",
Title: "Start of work",
Map:map
});
var workend = new Google.maps.Marker ({
position:flightplancoordinates[(flightplancoordinates.length-1)],
Label: "Final",//label displays only the first character
Title: "End of work",
Map:map
});

Drawing polygons
var trianglecoords = [
{lat:36.06602136399105, lng:120.35249282982409},
{lat:36.082132409147086, lng:120.42076576221541},
{lat:36.10016285436, lng:120.3873546955059},
{lat:36.06602136399105, lng:120.35249282982409},
];

//Construct the polygon.
var bermudatriangle = new Google.maps.Polygon ({
Paths:trianglecoords,
Strokecolor: ' #32CD32 ',
strokeopacity:0.8,
Strokeweight:2,
FillColor: ' #3CB371 ',
fillopacity:0.35
});
Bermudatriangle.setmap (map);

//Draw Rectangle
var rectangle = new Google.maps.Rectangle ({
Draggable:true,//Whether you can drag
Editable:true,//Whether you can Edit
Strokecolor: ' #FF0000 ',
strokeopacity:0.8,
Strokeweight:2,
FillColor: ' #FF0000 ',
Fillopacity: 0.35,
Map:map,
Bounds: {
north:36.114595,
south:36.104595,
east:120.369731,
west:120.349731}
});
//Draw Circle
var citycircle = new Google.maps.Circle ({
Draggable:true,//Can be dragged
Editable:false,//editable
Strokecolor: ' #FF0000 ',
strokeopacity:0.8,
Strokeweight:2,
FillColor: ' #FF0000 ',
fillopacity:0.35,< br> Map:map,
Center:qingdao,
radius:600//Unit M
});

Google Map Shape Display