A Complete Guide - WPF Google map

Last Updated: 03 Jul, 2025   
  YOU NEED ANY HELP? THEN SELECT ANY TEXT.

Explaining in Details and Showing Important Information for a WPF Google Map

1. Acquire a Google Maps API Key

Before you can use Google Maps in your application, you must obtain an API key from the Google Cloud Platform Console. This key is necessary to use Google Maps services. Follow these steps:

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement WPF Google map

Step 1: Create a WPF Application

  1. Open Visual Studio.
  2. Go to File > New > Project.
  3. Select WPF App (.NET Core) or WPF App (.NET Framework), depending on your version.
  4. Name your project (e.g., GoogleMapWpfApp) and click Create.

Step 2: Add a WebBrowser Control

WPF does not natively support Google Maps, but it can be embedded using a WebBrowser control, which essentially loads an HTML page with Google Maps.

  1. Open MainWindow.xaml in your project.

  2. Add a WebBrowser control to the XAML file.

    <Window x:Class="GoogleMapWpfApp.MainWindow" xmlns=" xmlns:x=" Title="Google Map in WPF" Height="600" Width="800"> <Grid> <WebBrowser x:Name="webBrowser" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> </Grid>
</Window>

Step 3: Get a Google Maps API Key

  1. Go to <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Google Map Integration</title> <style> /* Set the size of the map */ #map { height: 100%; width: 100%; } </style> <script async defer src=" <script> function initMap() { // The location of the center on the map var position = {lat: 40.712776, lng: -74.005974}; // New York City coordinates // The map, centered at the center position var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: position }); // A marker at the center position var marker = new google.maps.Marker({ position: position, map: map }); } </script> </head> <body onload="initMap()"> <!-- Map will appear here --> <div id="map"></div> </body> </html>

    Replace YOUR_API_KEY with the API key you obtained in Step 3.

Step 5: Load HTML into WebBrowser Control

Now that the HTML file with Google Maps is created, we need to load it into the WebBrowser control when the application starts.

  1. Open MainWindow.xaml.cs.

  2. Add the following code inside the MainWindow constructor:

    using System;
using System.IO;
using System.Reflection;
using System.Windows; namespace GoogleMapWpfApp
{ public partial class MainWindow : Window { const string MAP_HTML_PATH = "Map.html"; public MainWindow() { InitializeComponent(); // Load the HTML file from the project resources Uri resourceUri = new Uri(MAP_HTML_PATH, UriKind.Relative); webBrowser.Navigate(resourceUri); } }
}

  3. Right-click on your .csproj file and select Edit Project File.

  4. Add a reference to the Map.html file inside the <ItemGroup> tag to ensure it gets compiled:

    <ItemGroup> <Resource Include="Map.html" />
</ItemGroup>

  5. Save your changes and close the editor.

Step 6: Run the Application

Now we are ready to test our WPF application with Google Maps.

  1. Press F5 or click Start button in Visual Studio to run your application.
  2. You should see a map of New York City displayed in the WPF window.

Additional Features

If you want to add more features, such as user interaction or dynamic map centering, you can modify the HTML file and interact with it using C#. Here's a very basic way to handle dynamic map centering:

  1. Add a method in your MainWindow.xaml.cs for setting the map center:

    public partial class MainWindow : Window
{ public MainWindow() { InitializeComponent(); Uri resourceUri = new Uri(MAP_HTML_PATH, UriKind.Relative); webBrowser.Navigate(resourceUri); } private void SetMapCenter(double lat, double lng) { string script = $"var newPosition = {{lat: {lat}, lng: {lng}}}; map.setCenter(newPosition);"; webBrowser.InvokeScript("eval", new object[] { script }); }
}

  2. Modify your HTML file to expose the map object:

    <script async defer src="
<script> var map; // Declare the map variable globally function initMap() { var position = {lat: 40.712776, lng: -74.005974}; map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: position }); var marker = new google.maps.Marker({ position: position, map: map }); }
</script>

Conclusion

In this example, we created a simple WPF application that embedded a Google Map using a WebBrowser control. The process included obtaining an API key from Google Cloud, creating an HTML file for the map, and loading it into the WPF application.

You May Like This Related .NET Topic

📥 Download Code ▶️ Watch Online 📖 Read Description

Login to post a comment.