Adding Overlays to Maps

Tags: Tutorial, Google Maps

The whole point of displaying a map on your page is to present some information. Google's Map API allows you to display two types of overlays: markers and polylines. For the free version these are the two supported overlays. For the licensed version you can create custom overlays that derive from the GoogleOverlay class. However in this tutorial I will focus on markers and polylines. They are to be found in the Reimers.Map namespace.

A common feature of overlays is that they cannot be defined in the markup. They are created and dealt with in the code behind. The reason behind this is that there are numerous properties that depend on other map objects, fx. icons, and other properties that don't easily get represented using the markup, so I decided to avoid the whole thing all together.

A common feature for all overlays is that they must have a unique ID, otherwise client-server synchronisation becomes impossible. Be careful when adding overlays to the map's collection. An overlay witht the ID of an existing overlay will push out the old one, as it is presumed it has replaced it. For the same reason overlays should not be added every time the page is posted back to the server. They are kept in the map's viewstate, so there is no reason. Only overlays created using callbacks need to be added to the Overlays collection in a post back.

The polyline is the least interactive of the overlays. It basically just sits there. You can't fill it or click it and to move it you need to remove it and add a new one. To add a polyline to your map simply create a line object from the GooglePolyline class. The constructor is overloaded to allow for flexibility in creating a GooglePolyline according to your data.

The following code shows the creation of a GooglePolyline using the most inclusive constructor:

List l = new List();
l.Add(new GoogleLatLng(0, 0));
l.Add(new GoogleLatLng(55, -1));
GooglePolyline pl = new GooglePolyline("line", l, System.Drawing.Color.Azure, 5);

You will notice that I created the list of GoogleLatLngs before referencing it in the GooglePolyline constructor. You could just add a new generic list of GoogleLatLngs (System.Collections.Generic.List<GoogleLatLng>) and then add the points after. You can add as many points as you want to the polyline, just remember that the data has to be transferred to the client and be handled there. A polyline with hundreds of points can slow down the client considerably. Also notice that the line is added to the map's Overlays collection - in the free version it should be added to the map's Lines collection.

That's all there is to adding a polyline to your map. If the line doesn't show up check that your page conforms to Google's specifications.

To add a marker to your map you follow roughly the same procedure. Markers are more interactive than polylines so I will write some other tutorials about how to change the marker icon, handle marker events and so on. For now we will concentrate on the basic marker. To add a marker simply create a marker object from the GoogleMarker class. Again the constructor is overloaded to simplify marker creation. The simplest way to create a marker is like this:

GoogleMarker gm = new GoogleMarker("marker", 55, 0);

This will display a marker at the given coordinates with the default icon when the map loads. As with polylines the behavior is different for the free version, where the marker is added to the map's Markers collection.

That's how you add a marker. Refer to the other tutorials for more information on how to handle marker events and change icons.

Latest Tweets