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:
You’ll see a lot of namespace prefixes here:
GMap.NET.WindowsForms.Markers. We can clean actually this code up by moving them to using statements:
Now our code becomes:
…which is much more readable.
Let’s take this code apart:
- We create a new instance of
GMapOverlaywith 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:
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:
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:
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:
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:
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:
If you need even more interaction, you can also detect the mouse cursor hovering over a marker (
OnMarkerEnter) and leaving a marker (
Read on for more on using GMap.NET.