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

Did this article help you out? Please help us find more time to write useful guides & articles like this by donating a buck or two. It'll keep us coffee-fueled. Thanks!

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

9 9 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?

  2. sally says:

    hello….
    how can get last update to map in this page http://en.googlemaps.subgurim.net/ChangeLog.aspx
    it in 13/3/2013 i want new can you help me???

  3. Kromuald says:

    Hallo

    Thanks Again for the useful tutorials , but i would appreciate any help on how can one create kml file with GMaps . My kml File is to content the flight Way points of a drone , i would like the visualize on Google Earth

    • Roy says:

      Hello…Thanks for the brilliant tutorials. Kromuald, I also need assistance to display the contents of a KML file on a Google map . Have you found a solution ? Thanks

  4. Bak says:

    Hello! Can GMaps work with offline maps?

  5. harrison says:

    i have tried to use custom markers as informed by you, using this code.

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

    but it did not work i getthis error

    ///////////////////////////////////////////////////////////////////////
    See the end of this message for details on invoking
    just-in-time (JIT) debugging instead of this dialog box.

    ************** Exception Text **************
    System.ArgumentException: Parameter is not valid.
    at System.Drawing.Bitmap..ctor(String filename)
    at GmapTutorial1.MainForm.button4_Click(Object sender, EventArgs e) in C:\Users\brossboss\Documents\Visual Studio 2015\Projects\GmapTutorial1\GmapTutorial1\forms\MainForm.cs:line 272
    at System.Windows.Forms.Control.OnClick(EventArgs e)
    at System.Windows.Forms.Button.OnClick(EventArgs e)
    at System.Windows.Forms.Button.OnMouseUp(MouseEventArgs mevent)
    at System.Windows.Forms.Control.WmMouseUp(Message& m, MouseButtons button, Int32 clicks)
    at System.Windows.Forms.Control.WndProc(Message& m)
    at System.Windows.Forms.ButtonBase.WndProc(Message& m)
    at System.Windows.Forms.Button.WndProc(Message& m)
    at System.Windows.Forms.Control.ControlNativeWindow.OnMessage(Message& m)
    at System.Windows.Forms.Control.ControlNativeWindow.WndProc(Message& m)
    at System.Windows.Forms.NativeWindow.Callback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam)

    ************** Loaded Assemblies **************
    mscorlib
    Assembly Version: 4.0.0.0
    Win32 Version: 4.6.81.0 built by: NETFXREL2
    CodeBase: file:///C:/Windows/Microsoft.NET/Framework/v4.0.30319/mscorlib.dll
    —————————————-
    GmapTutorial1
    Assembly Version: 1.0.0.0
    Win32 Version: 1.0.0.0
    CodeBase: file:///C:/Users/brossboss/Documents/Visual%20Studio%202015/Projects/GmapTutorial1/GmapTutorial1/bin/Debug/GmapTutorial1.exe
    —————————————-
    System.Windows.Forms
    Assembly Version: 4.0.0.0
    Win32 Version: 4.6.81.0 built by: NETFXREL2
    CodeBase: file:///C:/Windows/Microsoft.Net/assembly/GAC_MSIL/System.Windows.Forms/v4.0_4.0.0.0__b77a5c561934e089/System.Windows.Forms.dll
    —————————————-
    System
    Assembly Version: 4.0.0.0
    Win32 Version: 4.6.81.0 built by: NETFXREL2
    CodeBase: file:///C:/Windows/Microsoft.Net/assembly/GAC_MSIL/System/v4.0_4.0.0.0__b77a5c561934e089/System.dll
    —————————————-
    System.Drawing
    Assembly Version: 4.0.0.0
    Win32 Version: 4.6.81.0 built by: NETFXREL2
    CodeBase: file:///C:/Windows/Microsoft.Net/assembly/GAC_MSIL/System.Drawing/v4.0_4.0.0.0__b03f5f7f11d50a3a/System.Drawing.dll
    —————————————-
    GMap.NET.WindowsForms
    Assembly Version: 1.7.0.0
    Win32 Version: 1.7
    CodeBase: file:///C:/Users/brossboss/Documents/Visual%20Studio%202015/Projects/GmapTutorial1/GmapTutorial1/bin/Debug/GMap.NET.WindowsForms.DLL
    —————————————-
    GMap.NET.Core
    Assembly Version: 1.7.0.0
    Win32 Version: 1.7
    CodeBase: file:///C:/Users/brossboss/Documents/Visual%20Studio%202015/Projects/GmapTutorial1/GmapTutorial1/bin/Debug/GMap.NET.Core.DLL
    —————————————-
    System.Configuration
    Assembly Version: 4.0.0.0
    Win32 Version: 4.6.81.0 built by: NETFXREL2
    CodeBase: file:///C:/Windows/Microsoft.Net/assembly/GAC_MSIL/System.Configuration/v4.0_4.0.0.0__b03f5f7f11d50a3a/System.Configuration.dll
    —————————————-
    System.Core
    Assembly Version: 4.0.0.0
    Win32 Version: 4.6.81.0 built by: NETFXREL2
    CodeBase: file:///C:/Windows/Microsoft.Net/assembly/GAC_MSIL/System.Core/v4.0_4.0.0.0__b77a5c561934e089/System.Core.dll
    —————————————-
    System.Xml
    Assembly Version: 4.0.0.0
    Win32 Version: 4.6.81.0 built by: NETFXREL2
    CodeBase: file:///C:/Windows/Microsoft.Net/assembly/GAC_MSIL/System.Xml/v4.0_4.0.0.0__b77a5c561934e089/System.Xml.dll
    —————————————-
    System.Data.SQLite
    Assembly Version: 1.0.84.0
    Win32 Version: 1.0.84.0
    CodeBase: file:///C:/Users/brossboss/AppData/Local/GMap.NET/DllCache/SQLite_v84_NET4_x86/System.Data.SQLite.DLL
    —————————————-
    System.Data
    Assembly Version: 4.0.0.0
    Win32 Version: 4.6.81.0 built by: NETFXREL2
    CodeBase: file:///C:/Windows/Microsoft.Net/assembly/GAC_32/System.Data/v4.0_4.0.0.0__b77a5c561934e089/System.Data.dll
    —————————————-
    System.Transactions
    Assembly Version: 4.0.0.0
    Win32 Version: 4.6.81.0 built by: NETFXREL2
    CodeBase: file:///C:/Windows/Microsoft.Net/assembly/GAC_32/System.Transactions/v4.0_4.0.0.0__b77a5c561934e089/System.Transactions.dll
    —————————————-
    System.EnterpriseServices
    Assembly Version: 4.0.0.0
    Win32 Version: 4.0.30319.17929 built by: FX45RTMREL
    CodeBase: file:///C:/Windows/Microsoft.Net/assembly/GAC_32/System.EnterpriseServices/v4.0_4.0.0.0__b03f5f7f11d50a3a/System.EnterpriseServices.dll
    —————————————-

    ************** JIT Debugging **************
    To enable just-in-time (JIT) debugging, the .config file for this
    application or computer (machine.config) must have the
    jitDebugging value set in the system.windows.forms section.
    The application must also be compiled with debugging
    enabled.

    For example:

    When JIT debugging is enabled, any unhandled exception
    will be sent to the JIT debugger registered on the computer
    rather than be handled by this dialog box.

  6. Jason says:

    Hi! VB.NET / Can anyone help me? I cant set Lat and Lng from Strings. It must be like this:

    (ok) 20.980144
    (not ok) “20.980144”
    (not ok) Form1.DataGridView2.CurrentRow.Cells(18).Value

    What do i have to do? Sorry for my language.

    —————————–

    Dim wsp_x = Form1.DataGridView2.CurrentRow.Cells(18).Value
    Dim wsp_y = 20.980144
    Me.Controls.Add(map)
    map.Dock = DockStyle.Fill
    With map
    .Position = New PointLatLng(wsp_x, wsp_y)
    .MapProvider = GMapProviders.OpenStreetMap
    .MinZoom = 3
    .MaxZoom = 17
    .Zoom = 14
    .Manager.Mode = AccessMode.ServerAndCache
    End With

Leave a Reply

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