TeamDev Blog: Embed Google Maps in .NET Desktop Application

The lead developer of the DotNetBrowser Anna Dolbina has shared another useful tutorial on C# Corner. Here is the full text for your convenience:

If you need to embed and display Google Maps in your .NET WPF or WinForms application, then DotNetBrowser library can help you to implement it without much effort.

DotNetBrowser is a .NET library that allows embedding a Chromium-based web browser control into a WPF or WinForms application to display web pages built with HTML5, CSS3, JavaScript, AJAX etc. The Browser component that displays web pages has two rendering modes, lightweight and heavyweight. Both modes have advantages and limitations, and it’s up to you which one to choose.

In order to embed and display Google Maps in your .NET application you just need to create an instance of the BrowserView, embed it into a Window or any other container and load the https://maps.google.com web page using the LoadURL() method of its Browser property. The following sample demonstrates the most straightforward way of doing this,

using DotNetBrowser;  
using DotNetBrowser.WinForms;  
using System;  
using System.Windows.Forms;  
  
namespace GoogleMapsSample  
{  
    public partial class Form1 : Form  
    {  
        private BrowserView browserView;  
  
        public Form1()  
        {  
            InitializeComponent();  
            browserView = new WinFormsBrowserView();  
            this.Controls.Add((Control)browserView.GetComponent());  
            browserView.Browser.LoadURL("http://maps.google.com");  
  
        }  
    }  
}  

In this example I created a BrowserView instance, embed it into a Form and load https://maps.google.com into the Browser to display Google Maps.

Once you compile and run this sample in Visual Studio you should see the following window:

map

For more guides on using DotNetBrowser in your .NET application see DotNetBrowser Support Site.

What if you need to communicate with the loaded map from your VB.NET or C# code? For example, you may want to provide an ability to zoom in or out from your .NET application. In this case you need to communicate with Google Maps API via JavaScript. DotNetBrowser API will help to execute any JavaScript code on the loaded web page.

To work with the loaded Map you need to use google.maps.Map JavaScript object. Since Google updates https://maps.google.com very often, you may not know how to access this object on the loaded web page. To avoid complications I recommend you to embed Google Maps using your own HTML file. You just need to create the map.html file with the following content:

<!DOCTYPE html>  
<html>  
 <head>  
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
   <style type="text/css">  
     html { height: 100% }  
     body { height: 100%; margin: 0; padding: 0 }  
     #map-canvas { height: 100% }  
   </style>  
   <script type="text/javascript"  
     src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">  
   </script>  
   <script type="text/javascript">  
     var map;  
     function initialize() {  
       var mapOptions = {  
         center: new google.maps.LatLng(48.209331, 16.381302),  
         zoom: 4  
       };  
       map = new google.maps.Map(document.getElementById("map-canvas"),  
           mapOptions);  
     }  
     google.maps.event.addDomListener(window, 'load', initialize);  
   </script>  
 </head>  
 <body>  
   <div id="map-canvas"/>  
 </body></html>  

To use this sample HTML, just replace API_KEY with a valid Google API key.

After that, load this map.html file to the Browser:

browserView.Browser.LoadURL("C:\\map.html");

The output should look as follows:

output

Now you can access google.maps.Map JavaScript object and invoke its zoom in/out methods. To change zoom use the map.setZoom (zoom:number) method.

Let’s try adding the zoom buttons to the sample,

private void button1_Click(object sender, EventArgs e)  
        {  
            if (zoomValue < MAX_ZOOM)  
            {  
                browserView.Browser.ExecuteJavaScript("map.setZoom(" + ++zoomValue + ")");  
            }  
        }  
  
        private void button2_Click(object sender, EventArgs e)  
        {  
            if (zoomValue > MIN_ZOOM)  
            {  
                browserView.Browser.ExecuteJavaScript("map.setZoom(" + --zoomValue + ")");  
            }  
        }  

Now you can zoom the map in and out directly from your application, using Google Maps controls:

maps

Complete example source code

using DotNetBrowser;  
using DotNetBrowser.WinForms;  
using System;  
using System.Windows.Forms;  
  
namespace GoogleMapsSample  
{  
    public partial class Form1 : Form  
    {  
        private BrowserView browserView;  
        private int zoomValue = 4;  
  
        public static readonly int MIN_ZOOM = 0;  
        public static readonly int MAX_ZOOM = 21;  
  
        public Form1()  
        {  
            InitializeComponent();  
            browserView = new WinFormsBrowserView();  
            this.Controls.Add((Control)browserView.GetComponent());  
  
            browserView.Browser.LoadURL("C://map.html");  
  
        }  
  
        private void button1_Click(object sender, EventArgs e)  
        {  
            if (zoomValue < MAX_ZOOM)  
            {  
                browserView.Browser.ExecuteJavaScript("map.setZoom(" + ++zoomValue + ")");  
            }  
        }  
  
        private void button2_Click(object sender, EventArgs e)  
        {  
            if (zoomValue > MIN_ZOOM)  
            {  
                browserView.Browser.ExecuteJavaScript("map.setZoom(" + --zoomValue + ")");  
            }  
        }  
    }  
}  

If you require more Google Maps functions in your WPF or WinForms application, DotNetBrowser API can help you to invoke other methods of the google.maps.Map JavaScript object and to access all the required functionality.

Useful Links:

Friday, May 27, 2016

Embed Google Maps in .NET Desktop Application