This project is read-only.

Polylines and Polygons

Before going further, I suppose you have installed the GoogleMap control to your web application/project.
Also make sure you have obtained a Google Maps API key for your web application.
You can do so on next url Google Maps API - Sign Up

For the basics of how to add control to the page, set with and height, google maps api key, zoom etc.,
check out the common samples' page

In addition to Markers and Directions collections two more are available now:
  • Polylines - for adding one or more polylines to a google map;
  • Polygons - for adding one or more polygons to a google map;


Every polyline has next properties:
  • Color - the color of the line;
  • Weight - the width of the line in pixels;
  • Opacity - the opacity of the line, value must be between 0 and 1;
  • IsGeodesic - Render each edge of the polyline as a geodesic (a segment of a "great circle"). A geodesic is the shortest path between two points along the surface of the Earth;
A polylines has a deafult collection of GooglePoint with properties: Latitude and Longitude.


Every polygon has next properties:
  • FillColor - the color used to fill the polygon;
  • FillOpacity - the opacity of polygone fill color;
  • StrokeColor - the color of the border;
  • StrokeWeight - the width of border in pixels;
  • StrokeOpacity - the opacity of the border;
  • IsClickable - whether or not the polygon is clickable;
A polygones has a deafult collection of GooglePoint with properties: Latitude and Longitude.


  • Markup
    Polygons Sample
<hr style="visibility: hidden;" />
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" AsyncPostBackTimeout="900">
<asp:UpdatePanel runat="server" ID="upTest">
        <hr style="visibility: hidden;" />
        <artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="560px" Latitude="42.1229" Longitude="24.7879"
                <artem:GoogleMarker Address="plovdiv bulgaria" Text="plovdiv bulgaria" />
                <artem:GoogleMarker Address="athens greece" Text="athens greece" />
                <artem:GoogleMarker Address="istanbul turkey" Text="istanbul turkey" />
                <artem:GoogleMarker Address="bucurest romania" Text="bucurest romania" />
                <artem:GoogleMarker Address="beograd serbia" Text="beograd serbia" />
                <artem:GoogleMarker Address="skopie macedonia" Text="skopie macedonia" />
                <artem:GooglePolyline Color="Magenta" Weight="2" Opacity="1" IsGeodesic="false">
                    <artem:GooglePoint Latitude="42.1229" Longitude="24.7879" />
                    <artem:GooglePoint Latitude="51.34433" Longitude=".17578" />
                    <artem:GooglePoint Latitude="41.70572" Longitude="12.39257" />
                <artem:GooglePolygon FillColor="Red" FillOpacity=".8" StrokeColor="Blue" StrokeWeight="2">
                    <artem:GooglePoint Latitude="37.97918" Longitude="23.716647" />
                    <artem:GooglePoint Latitude="41.036501" Longitude="28.984895" />
                    <artem:GooglePoint Latitude="44.447924" Longitude="26.097879" />
                    <artem:GooglePoint Latitude="44.802416" Longitude="20.465601" />
                    <artem:GooglePoint Latitude="42.002411" Longitude="21.436097" />
                    <artem:GooglePoint Latitude="37.97918" Longitude="23.716647" />

In the samples above I have added one polyline and polygon.
You can add more than one polyline and polygon.

You can take a look at live sample of the code above here and watch video here.

That's all folks.

Happy coding ...

Any smart ideas and comments are welcome. Please do not hesitate to question me
See more about me and my works under ArtemBG |

Last edited Feb 24, 2008 at 9:59 AM by velio, version 5


No comments yet.