Targeting Version 3 of Google Maps

Tags: Google, Map, Control, ASP.NET

The Google Maps API has moved to version 3 some time ago, and it has taken some time to update the map control. There is now a build that targets the new API and implements most of the features in the version of the control targeting version 2 of the Google Maps API. Given that the control is targeting a new underlying API there are bound to be some changes to the API of the Google Maps .NET Control, but I have strived to keep the changes to a minimum. But do note that there will be several breaking changes if you update your application. The class names used in the control are designed to mirror the class names in the underlying map API. If you find that the documentation for this map control is lacking, please read Google's documentation and assume that the control allows and supports the documented behavior.

The control is open source and available for both commercial and private use.

The new control can be used with both Visual Studio Express as well as the normal versions of Visual Studio, targeting either .NET 3.5 or .NET 4.

Adding the Map

To add a map to your ASP.NET page you will first need to add an assembly reference

<%@ Register Assembly="Reimers.Google.Map" Namespace="Reimers.Google.Map" TagPrefix="Reimers" %>

On the part of the page that you want to add your map you can now add the control using the standard ASP.NET control syntax:

<Reimers:Map runat="server"></Reimers:Map>

This will create a small 256px x 256px map with the default map types and controls. You can alter the default state by setting map properties either as attibute values or internal elements. Internal elements are used for complex types, where simple property values are generally set using attributes. The control supports the various map controls defined by the API. The code below shows how to add a MapTypeControl to the map.

<Reimers:Map runat="server" Width="600" Height="400" DefaultMapType="Terrain">
	<Center Latitude="51.477" Longitude="0.0" />
	<MapControls>
		<Reimers:MapTypeControl Position="Top_Right" ControlStyle="Dropdown_Menu" />
	</MapControls>
</Reimers:Map>

Overlays

The same syntax applies for adding overlays to the control. Currently the documented overlays are supported by the control.

<Reimers:Map runat="server" Width="600" Height="400" DefaultMapType="Terrain">
	<Center Latitude="51.477" Longitude="0.0" />
	<Overlays>		
		<Reimers:Rectangle FillColor="Green" FillOpacity="0.5" BorderColor="Red" BorderOpacity="0.9">
			<NorthEast Latitude="51.48" Longitude="0.1" />
			<SouthWest Latitude="51.47" Longitude="-0.1" />
		</Reimers:Rectangle>
		<Reimers:Polyline Color="Green" Width="5">
			<Points>
				<Reimers:LatLng Latitude="51.477" Longitude="0.0" />
				<Reimers:LatLng Latitude="51" Longitude="1.0" />
			</Points>
		</Reimers:Polyline>
		<Reimers:Circle Radius="500" FillOpacity="0.3">
			<Center Latitude="51.477" Longitude="0.0" />
		</Reimers:Circle>
	</Overlays>
</Reimers:Map>

AdSense Support

The new map API also supports displaying location relevant ads directly on the map as a map control. The control provides an abstraction over the AdSense API, but assuming you have an AdSense publisher ID you can add an ad block by adding a control to the MapControls collection, like so:

<Reimers:Map runat="server">
	<MapControls>
		<Reimers:AdSenseControl Position="Right_Center" PublisherID="pub-YourOwnIdGoesHere"/>
	</MapControls>
</Reimers:Map>

The new control has a more open clientside (JavaScript) API, which will make it easier to update the control clientside and continue working with those changes on the server. Interacting with the clientside code will be dealt with in a later post.

The control targeting version 3 of Google Maps can be downloaded from here.

Latest Tweets