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 […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

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:

  1. Create a map overlay that will contain your collection of markers.
  2. Create a new marker and add it to the overlay.
  3. 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 , GMap.NET.WindowsForms  and 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 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:

A Google map with a marker in GMap.NET

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:

And you’ll get something like this:

A Google map with a bitmapped marker in GMap.NET

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:

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:

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

Save

Save

Save

Save

Save

Save

Save

Save

Trackbacks

  1. GMap.NET Beginners Tutorial: Maps, markers, polygons & routes [updated for Visual Studio 2015 and GMap.NET 1.7] | Independent Software
  2. GMap.NET Beginners Tutorial: Maps, markers, polygons & routes [updated for Visual Studio 2015 and GMap.NET 1.7] (part 3) | Independent Software

Comments

3 3 Responses to “GMap.NET Beginners Tutorial: Adding clickable markers to your map [updated for Visual Studio 2015 and GMap.NET 1.7]”
  1. Lucas Roque says:

    Is there any way to convert an address to geolocation with GMaps?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">