Your First Map

Tags: Tutorial, Google Maps

The Google Maps .NET Control is designed to render with a minimum of user input and almost works as drag and drop. If you are using Visual Studio 2005 or Visual Web Developer Express you can add the control to your toolbox and then drag and drop it on to the web page where you want a map. Visual Studio or Visual Web Developer Express will add the following code to your page:

At the top of the page the assembly will be registered for use on the page.

<%@ register assembly="GoogleMap" namespace="Reimers.Map" tagprefix="Reimers" %>

Somewhere on the page where you want your map to be you will have:

<Reimers:GoogleMap ID="GoogleMap1" runat="server" />

One of the only requirements to get a map key from Google (get it here) which is to be used to verify the user's access to the underlying JavaScript API. This GoogleKey property of the control needs to be assigned this value. This can be done either in the markup or in the code behind.

If you assign it directly in the markup you should write your map tag as:

<Reimers:GoogleMap ID="GoogleMap1" runat="server" GoogleKey="Googlesreallylongkey" />

If you write it in your code behind you can write as follows:

protected void Page_Load(object sender, EventArgs e)
{
	GoogleMap1.GoogleKey = "Googlesreallylongkey";
}

One thing I like to do is to store the key in the Web.Config file. That way I don't have to cut and paste a huge key every time I want to add a map. I can simply grab it from the Web.Config using the ConfigurationManager class, like this:

protected void Page_Load(object sender, EventArgs e)
{
	GoogleMap1.GoogleKey = ConfigurationManager.AppSettings["MapKey"];
}

To size your map set the Width and Height properties to the desired size. I recommend doing this is the markup but you are free to do it in the code behind.

The final thing you need to set is the starting location of your map. This is done using the Latitude, Longitude and Zoom properties. Latitude and Longitude take a double value (System.Double) and the Zoom property takes an integer (System.Integer). The licensed version has an additional Center property where the map center can be set directly using a GoogleLatLng object. One thing to note when setting the map location is that if it is set in the markup or during a postback it overrides the map position before the postback. The map is programmed to maintain its position through postbacks, so I would advise that any position set during the page load routine be done only if the page has not been posted back, like so:

if (!Page.IsPostBack)
{
	GoogleMap1.Latitude = 55;
	GoogleMap1.Longitude = 0;
	GoogleMap1.Zoom = 10;
}

 

public partial class demos_mapdemo : System.Web.UI.Page
{
	protected void Page_Load(object sender, EventArgs e)
	{
		GMap.GoogleKey = ConfigurationManager.AppSettings["MapKey"];
		GMap.Width = new Unit(100, UnitType.Percentage);
		GMap.Height = new Unit(500, UnitType.Pixel);
		GMap.MapControls.Add(new Reimers.Map.Controls.GoogleSmallMapTypeControl("smc"));
		GMap.MapControls.Add(new Reimers.Map.Controls.GoogleSmallMapControl("sc"));
		GMap.RenderDelay = 600;

		if (!Page.IsPostBack)
		{
			GMap.Latitude = 45;
			GMap.Longitude = -36;
			GMap.Zoom = 3;

			GoogleIcon icon1 = new GoogleIcon("green", "http://www.reimers.dk/images/icons/icong.png", "http://www.google.com/mapfiles/shadow50.png", new GoogleSize(20, 34), new GoogleSize(37, 34), new GooglePoint(9, 34), new GooglePoint(0, 0), new GooglePoint(9, 34));

			GoogleIcon icon2 = new GoogleIcon();
			icon2.ID = "black";
			icon2.Image = "http://www.reimers.dk/images/icons/small_black.png";
			icon2.ImageSize = new GoogleSize(12, 20);
			icon2.AnchorPoint = new GooglePoint(6, 20);
			icon2.Shadow = "http://www.reimers.dk/images/icons/small_shadow.png";
			icon2.ShadowSize = new GoogleSize(22, 20);
			icon2.InfoWindowAnchor = icon2.AnchorPoint;

			GoogleLatLng p1 = new GoogleLatLng(38.897312273401731, -77.036733627319336);
			GoogleLatLng p2 = new GoogleLatLng(51.4997134812415, -0.12462615966796875);

			GoogleMarker m1 = new GoogleMarker("m1", p1);
			m1.MarkerText = "White House
Link"; GoogleMarker m2 = new GoogleMarker("m2", p2); m2.MarkerText = "Westminster
London, U.K."; m2.Options = new GoogleMarkerOptions("Westminster", icon1); m1.Options = new GoogleMarkerOptions(icon2); GooglePolyline pl = new GooglePolyline(); pl.Points.Add(p1); pl.Points.Add(p2); pl.Color = System.Drawing.Color.Crimson; pl.Width = 15; pl.ID = "pl"; pl.Opacity = 0.25; GMap.Icons.Add(icon1); GMap.Icons.Add(icon2); GMap.Overlays.Add(m1); GMap.Overlays.Add(m2); GMap.Overlays.Add(pl); } } protected void GMap_MarkerClick(object sender, OverlayEventArgs e) { GoogleMarker m = (GoogleMarker)e.Overlay; e.MapCommand = m.OpenInfoWindowHTML(e.Map, "
" + m.MarkerText + "
"); } protected void GMap_Click(Object sender, CoordinatesEventArgs e) { e.MapCommand = e.Map.OpenInfoWindowHTML(e.Coordinates, "
Lat: " + e.Coordinates.Latitude.ToString() + "
Lng: " + e.Coordinates.Longitude.ToString() + "
"); } }

Latest Tweets