This tutorial explains how you can use the GMap.NET control for .NET Windows Forms to put interactive maps on your forms, complete with clickable markers that can be styled and responsive tooltips.

Don’t forget to visit the first part of the tutorial for GMap.NET: Setting up your map first! If you’ve already seen this part of the tutorial, move on to part 3: GMap.NET: Adding polygons and routes to your map.

Adding markers to the map

GMap.NET allows you to add as many markers as you like to your map, with icons of your choosing (or even custom bitmaps). Adding markers is done through code and requires the following steps:

• Create a map overlay that will contain your collection of markers.
• Create a new marker and add it to the overlay.
• Add the overlay to the map.

Anything that you ever want to place on a map (be it markers, polygons, or routes) must live in an overlay. You can mix markers, polygons and routes all in the same overlay, or you can add them to separate overlays. The latter approach allows you to show or hide all markers in one go, while leaving the polygons and routes visible – but it’s up to you. Here is the full code that creates a map and adds a single marker to it:

gmap.MapProvider = GMap.NET.MapProviders.BingHybridMapProvider.Instance;
GMap.NET.GMaps.Instance.Mode = GMap.NET.AccessMode.ServerOnly;
gmap.SetPositionByKeywords("Paris, France");
gmap.ShowCenter = false;

GMap.NET.WindowsForms.GMapOverlay markers = new GMap.NET.WindowsForms.GMapOverlay("markers");
GMap.NET.WindowsForms.GMapMarker marker =
    new GMap.NET.WindowsForms.Markers.GMarkerGoogle(
        new GMap.NET.PointLatLng(48.8617774, 2.349272),
        GMap.NET.WindowsForms.Markers.GMarkerGoogleType.blue_pushpin);
markers.Markers.Add(marker);
gmap.Overlays.Add(markers);

You’ll see a lot of namespace prefixes here: GMap.NET, GMap.NET.WindowsForms and GMap.NET.WindowsForms.Markers. We can clean actually this code up by moving them to using statements:

using GMap.NET;
using GMap.NET.WindowsForms;
using GMap.NET.WindowsForms.Markers;
using GMap.NET.MapProviders;

Now our code becomes:

gmap.MapProvider = BingHybridMapProvider.Instance;
GMaps.Instance.Mode = AccessMode.ServerOnly;
gmap.SetPositionByKeywords("Paris, France");
gmap.ShowCenter = false;

GMapOverlay markers = new GMapOverlay("markers");
GMapMarker marker = new GMarkerGoogle(
    new PointLatLng(48.8617774, 2.349272),
    GMarkerGoogleType.blue_pushpin);
markers.Markers.Add(marker);
gmap.Overlays.Add(markers);

…which is much more readable.

Let’s take this code apart:

• We create a new instance of GMapOverlay with the name “markers”. Of course you can give this overlay any name you want.
• We create a new instance of GMarkerGoogle (which is a specialization of GMapMarker) and provide it with a location (a PointLatLng) and a marker type.
• We add the newly created marker to our overlay.
• We add the overlay to our map.

Our map now looks like this:

We’ve used GMarkerGoogle to create our map marker, but GMap.NET also offers GMarkerCross (which is a simple red cross and allows no icon). As for the icons for the Google-style marker, GMap.NET offers many. Type GMarkerGoogleType. in Visual Studio – after you type the period, a list of possibilities will show up. Still, you can also use your own bitmap:

GMapOverlay markers = new GMapOverlay("markers");
GMapMarker marker = new GMarkerGoogle(
    new PointLatLng(48.8617774, 2.349272),
    new Bitmap("mybitmap.jpg"));

And you’ll get something like this:

Adding tooltips to your markers

Just like Google Maps itself, GMap.NET allows you to add tooltips to the markers on your map. This is as simple as putting text in a marker property:

marker.ToolTipText = "hello\nout there";

Note that I’ve used \n to make the text split over two lines. Tooltip text is always centered in the tooltip. By default, the tooltip text will be blue on a white background and with a blue border, but this can be changed. Here, I’ve set my tooltip to have white text on a black background, and plenty of padding around the text:

marker.ToolTip.Fill = Brushes.Black;
marker.ToolTip.Foreground = Brushes.White;
marker.ToolTip.Stroke = Pens.Black;
marker.ToolTip.TextPadding = new Size(20, 20);

There is unfortunately no easy way of changing the rounded borders of the tooltip, or add a drop shadow to it.

By default, tooltips appear when you move your mouse cursor over a marker. You can also set a marker’s tooltip to be always visible:

marker.ToolTipMode = MarkerTooltipMode.OnMouseOver;

Marker events

It is possible to detect that a marker was clicked and do something. The markers themselves do not have any event hooks; only the GMap.NET control itself does. To be notified of marker clicks, implement the OnMarkerClick event (find it in the Properties window, under Events). In the following example, I have given my markers a Tag value so I’ll know which one was clicked, since it’s likely that in a real application my markers will come from a database:

private void gmap_OnMarkerClick(GMapMarker item, MouseEventArgs e)
{
  Console.WriteLine(String.Format("Marker {0} was clicked.", item.Tag));
}

If you need even more interaction, you can also detect the mouse cursor hovering over a marker (OnMarkerEnter) and leaving a marker (OnMarkerLeave).

Read on for more on using GMap.NET.

Next GMap.NET Tutorial: Adding polygons and routes to your map