Codebehind code how to add mapmarkers, circle, polygon..

ASP.NET Google Map Control wraps Google Maps API functionality, providing an easy and fast way of adding Google Maps in your ASP.NET pages with “Zero-Written-JavaScript” code. GoogleMapsControl includes many features (markers, polyline, polygons, directions) and gives you almost all Google Maps API functionality in enjoyable ASP.NET way of coding.

Install the NuGet package GoogleMapControl in you ASP.NET application or just run the following command in the Package Manager Console

PM> Install-Package GoogleMapControl
You can add sample pages to your existing web application by installing the samples NuGet package just run following command in the Package Manager Console.
PM> Install-Package GoogleMapControl.Samples

ASPX page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%@ Page Title="" Language="C#" MasterPageFile="Markers.master" AutoEventWireup="false" CodeBehind="CodeBehind.aspx.cs" Inherits="GoogleMaps.Samples.Markers.CodeBehind" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Markers Code Behind
    </h2>
    <p>
        GoogleMap control markers code behind sample.
    </p>
    <div class="map-wrap">
        <map:GoogleMap ID="GoogleMap1" runat="server" Latitude="42.1229" Longitude="24.7879"
            Zoom="6" EnableScrollWheelZoom="true" CssClass="map" Width="100%" Height="600px" FullscreenControl="true">
        </map:GoogleMap>
    </div>
</asp:Content>

Codebehind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
using System;
using System.Collections.Generic;
using System.Drawing;
using GoogleMaps.Markers;
using GoogleMaps.Overlays;

namespace GoogleMaps.Samples.Markers
{
    public partial class CodeBehind : System.Web.UI.Page
    {
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            GoogleMarkers markers = new GoogleMarkers();

            markers.Markers.Add(new Marker
            {
                Position = new LatLng(42.1229, 24.7879),
                Title = "Click on me",
                Info = "Text info on marker 1"
            });
            markers.Markers.Add(new Marker
            {
                Position = new LatLng(42.7, 23.3),
                Title = "Click on me",
                Info = "Text info on marker 2"
            });
            markers.MarkerOptions.Clickable = true;
            markers.MarkerOptions.Draggable = true;
            markers.Click += HandleClick;

            GoogleMap1.Markers.Add(markers);

            var circle = new GoogleCircle
            {
                Draggable = true,
                Editable = true,
                Center = new LatLng(42.1229, 24.7879),
                Radius = 200000
            };
            var polygon = new GooglePolygon
            {
                Draggable = true,
                Editable = true,
                FillColor = Color.Red,
                FillOpacity = .5F,
                StrokeColor = Color.Black,
                StrokeWeight = 5,
                Paths = new List<LatLng> {
                    new LatLng(37.97918, 23.716647),
                    new LatLng(41.036501, 28.984895),
                    new LatLng(44.447924, 26.097879),
                    new LatLng(44.802416, 20.465601),
                    new LatLng(42.002411, 21.436097),
                    new LatLng(37.97918, 23.716647),
                    new LatLng(37.97918, 23.716647)
                }
            };
            var rectangle = new GoogleRectangle
            {
                Draggable = true,
                Editable = true,
                FillColor = Color.Green,
                Bounds = new Bounds
                {
                    SouthWest = new LatLng(44.802416, 20.465601),
                    NorthEast = new LatLng(37.97918, 23.716647)
                }
            };
            GoogleMap1.Overlays.Add(circle);
            GoogleMap1.Overlays.Add(polygon);
            GoogleMap1.Overlays.Add(rectangle);

            // add server side click handler on polygon only
            //polygon.Click += Polygon_Click;
        }

        protected void HandleClick(object sender, MarkerEventArgs e)
        {
            int? index = e.Index;

            // this is the position od the clicked marker.
            LatLng position = e.Position;

            if(index.HasValue)
            {
                var markers = (GoogleMarkers)sender;
                var marker = markers.Markers[index.Value];
                // This now should be the clicked marker with all its data.
            }
        }
    }
}