Use Google Maps in ASP. NET)

Introduction

Many people know Google map. In fact, Google develops applications for ourselves.ProgramA wide range of APIs are provided. We can use them as long as we have some JavaScript knowledge. However, it is difficult for me to use JavaScript to call Google map APIs on the ASP. NET page, especially to use server-side functions to dynamically draw Google map. For example, I want to read the latitude and longitude information from SQL Server and insert a point in Google map. If you are familiar with Ajax, you will soon be able to get the answer. We must use JavaScript to call ASP. NET Server-side functions and use the obtained data to draw a Google Map. Simple? Actually, this is not the case for me. Therefore, I decided to develop a user control to process JavaScript.CodeIn this way, I can focus on the server-side functions.

 

Features

1. Google maps can be drawn without JavaScript knowledge. You only need to add custom controls to the corresponding page.

2. Use ajax to obtain server data.

3. provides superior performance.

 

How to Use

Here, I do not want to explain how I created the control. I just want to teach you how to use it.

 

System Requirements

1. Visual Studio 2005 or later

2. Microsoft ASP. NET Ajax Extensions support

3. Internet Explorer 7.0 or Mozilla Firefox 2.x

 

You only need to complete the following steps:

1. Create an ASP. NET Ajax-enabled website.

2. SetSource codeCopy the app_code folder, googlemapforaspnet. ascx, googlemapforaspnet. ascx. CS, and gservice. asmx to your ASP. NET application.

3. Make sure your website supports Ajax technology.

4. open default. aspx (or any location where you want to add Google map), drag and drop the custom control to the corresponding location and compile it, so that the simplest ASP with Google map is implemented. net web page.

 

Now let's add some annotation points for Google map. Add some code to the page_load () event.

 

Passing parameters to the Google map control

 

Note: you must first set your Google Maps API key (available for free from Google ).

The following code is used:

If(! Ispostback)
{
Googlemapforaspnet1.googlemapobject. apikey ="<Yourgooglemapkey>"; // Define your Google Maps API key

Googlemapforaspnet1.googlemapobject. apiversion ="2"; // Select the Google Maps API version

Googlemapforaspnet1.googlemapobject. width ="800px";
Googlemapforaspnet1.googlemapobject. Height ="600px"; // Defines the size of the Google map control

Googlemapforaspnet1.googlemapobject. zoomlevel =14; // Defines the scaling level. The default value is 3.

Googlemapforaspnet1.googlemapobject. centerpoint =NewGooglepoint ("Centerpoint", 31.19, 120.37); // defines the map center location

Googlemapforaspnet1.googlemapobject. Points. Add (NewGooglepoint ("1",31.19, 120.37); // define a new map annotation point at the specified longitude and latitude

}

In this way, you can customize the map loading position and annotation point.

 

Custom annotation point icon

 

This control supports custom annotation point icons. First, copy the icon file to your website directory, and then use the following assignment statement:

GP. iconimage ="Icons/pushpin-blue.png";

You can also add comments to the annotation point. When you click the annotation point, you can see the annotation content. Code:

GP. infohtml = "This Is A annotation point ";

 

Now, we have introduced the basic content of using Google Maps control. Next, let's take a look at its advanced functions. For example, when a user performs some operations, the annotation point is moved.

 

Create an interactive map

 

This control allows you to create interactive maps. The following example shows how to move the annotation point when you click the button. Use the following methods:

 

1. Insert a button control and add the following code to its click event:

Protected VoidButton#click (ObjectSender, eventargs E)
{
Googlemapforaspnet1.googlemapobject. Points ["1"]. Latitude ++ =0.003;
Googlemapforaspnet1.googlemapobject. Points ["1"]. Longpolling + =0.003;
}

You can control the increment of longitude and latitude.

2. Run this page and you will find that the whole page will be refreshed or returned. To avoid this problem, we only need to add the button control to the updatepanel control.

3. Run the page again and you can see that everything on the page is normal.

 

Automatic update and GPS navigation

 

We can use the timer control in the Ajax framework to implement this function. In the timer_tick () event, you can define the new longitude and latitude of the vertex. In this way, all the annotation points on the map are automatically updated after the specified time interval. You can also connect to a GPS device to form a GPS navigation system.

 

Draw a line using Google Maps Control

 

1. First, add the endpoints of the line. The Code is as follows:

googlepoint gp1 = New googlepoint ();
gp1.id = " gp1" ;
gp1.latitude = 31.19; // define the latitude of the annotation point
gp1.long.pdf = 120.37; // define the latitude of the annotation point
gp1.infohtml = "this is the annotation point 1" ; // optional comment
googlemapforaspnet1.googlemapobject. points. add (gp1); // Add this point on the map

googlepoint gp2 = New googlepoint ();
gp2.id = " gp2"
gp2.latitude = 31.19001;
gp2.long.pdf = 120.37001;
gp2.infohtml = " This is annotation 2" ;
googlemapforaspnet1.googlemapobject. points. add (gp2);

Googlepoint gp3 =NewGooglepoint ();
Gp3.id ="Gp3";
Gp3.latitude = 31.19003;
Gp3.longpolling = 120.36998;
Gp3.infohtml ="This is Note 3";
Googlemapforaspnet1.googlemapobject. Points. Add (gp3 );

2. Draw a line using these points

Googlepolyline PL1 =NewGooglepolyline (); // defines a line
Pl1.id ="PL1";
Pl1.colorcode ="# 0000ff"; // Defines the line color
Pl1.width =5; // Defines the line width

Pl1.points. Add (gp1); // Add these points (draw a line)
Pl1.points. Add (gp2 );
Pl1.points. Add (gp3 );

3. Add the line to Google Maps Control

Googlemapforaspnet1.googlemapobject. polylines. Add (PL1 );

 

 

Use Google Maps control to draw a polygon

 

1. Add the vertices of the polygon according to the above method. I will not go into details here.

2. Use these points to create a polygon. The Code is as follows:

Googlepolygon PG1 =NewGooglepolygon (); // defines a polygon.
Pg1.id ="PG1";
Pg1.fillcolor ="# 0000ff"; // Defines the color of each side of a polygon.
Pg1.fillopacity =0.4;

Pg1.points. Add (gp1); // Add the points created above to the polygon (as vertices)
Pg1.points. Add (gp2 );
Pg1.points. Add (gp3 );
..........................................

Pg1.points. Add (GPN); // the nth Vertex

3. Add a polygon to Google Maps Control

Googlemapforaspnet1.googlemapobject. polygons. Add (Pg1 );

 

Write it here today and continue the next day.

 

At the request of all netizens, add the source code: Click to download