Google maps in WPF with WebBrowser and Google Maps API v3

Introduction

Google provides a javascript api for include maps with the same functions of maps.google.com in a html page.

The page where google explain this api is here

On the version v2 you need to register to obtain an api key for use the library, with the version v3 it's optional but its recommended because the api has a limitation, you can only generate 25,000 maps per day, if you need more you need to pay so you need register and if you register you can:

Obtain statistics of the maps generated per day
Pay for additional maps(more than 25,000 per day)
Restrict the use of your key for to prevent use on unauthorized sites

To create your API key, visit the APIs Console and log in with your Google Account.

Background

The most basic example is the next:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com.mx/maps/api/js?sensor=true&language="es""></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

You need 5 elements:

The label <meta> specify that the map should show in full screen and the user can't modify the size.
```
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
```
The api of google
```
<script type="text/javascript" src="http://maps.google.com.mx/maps/api/js?sensor=true&language="es&key=your_key""></script> 
```
The parameter sensor = true indicates that the application uses a sensor to indentify the location of the user. The parameter of the language specify the language for the instructions. And in the parameter of the key you should include your api.
You need include a location for include the map. Generally is a div. In this example the size of the map is the size of the page.
```
<div id="map_canvas" style="width:100%; height:100%"></div> 
```
The function for initialize and show the map.

For ubicate a map you need the latitude and the longitude for the place that you want to show
The options for the map, like the zoom, the map type:

ROADMAP displays the default map of Google Maps.
SATELLITE displays the photographic map
HYBRID displays a mix of photographic and default map.
TERRAIN displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).

For guarante that the map show after the page is createad and show crrectly you need load the map in the event load of the page.
```
<body onload="initialize()"> 
```

If the map doesn't show maybe the latitude and the longitude it's a location in the sea or you could had a javascript error.

You can personalize a lot of thing of the map, the style of the map, put a marker and a info window for the marker, the directions between 2 points by bicyle, auto, walk, the trafficle.

For add an marker you can include the next code:

var image = 'down2.png';
var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: image,
        animation: google.maps.Animation.DROP,
        title:"Click for show the data of the client"
   });

You can specify an image for the marker, the animation, and the text that show when the mouse is over the image.

For add an info window that show a text and imgaes for the marker you can incude the next code:

 var contentString = '<div id="content">'+
                       '<h1>[Client]</h1>'+
                       '<img src="/images/image.jpg widht="200" height="200" style="margin: 0 auto; display:block"/>'+
                       '<br/><br/>[Direction]'+            
                     '</div>';
 var infowindow = new google.maps.InfoWindow({
        content: contentString
});

You can view the live example here.

You can show the directions between 2 points, for this you need the <div> for the map and optional you can include a <div> for the directions. The javascript function is

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var origin = new google.maps.LatLng(37.7699298, -122.4469157);
var destination = new google.maps.LatLng(37.7683909618184, -122.51089453697205);

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var myOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: origin
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
  calcRoute();
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

function calcRoute() {
  var selectedMode = document.getElementById("mode").value;
  var request = {
      origin: origen,
      destination: destino,
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

You can view the live example here.

For include the map on WPF I use a WebBrowser Control, and I load a html file that I previous create, and I read the file and replace the latitudes and longitudes, and the text for the info Window.

The application of the demo show the data of a client the location of the client on the map, and other option to show the directions for arrive to the location of the client from the location of the company.

In the demo I use a DockPanel to automatic resize the map when the windows changes the size. I Read the html page and find and replace the text like latLng and orign and destination from the example. I set a short Uri because with long path the wpf show an error.

if (File.Exists(AppDomain.CurrentDomain.BaseDirectory + "\\map.html"))
{
        StreamReader objReader = new StreamReader(AppDomain.CurrentDomain.BaseDirectory + "\\map.html");
        string line = "";
        line = objReader.ReadToEnd();
        objReader.Close();
        line = line.Replace("[Location]", tbLocation.Text);
        line = line.Replace("[Client]", "25.520581,-105.40607");
        line = line.Replace("[Image]", "client" + tbID.Text + ".png");
        line = line.Replace("[Direction]", tbDirection.Text + "<br/>" + tbCity.Text + "," + tbState.Text);
        StreamWriter page = File.CreateText("c:\\Users\\Abi\\map.html");
        page.Write(line);
        page.Close();
        Uri uri = new Uri("c:\\Users\\Abi\\map.html");
        webBrowser1.Navigate(uri);
}

Points of Interest

With the new Api V3 of google maps and a WebBrowser on .NET you can Add Maps in your applications. The api provides a lot configuration and with css you can add more design to the maps for integrate in your wpf o winforms applications. I prefer wpf because I'm learning WPF but its similar on Winforms.

You can save the data of Latitud and Longitude of your clientes in your database and it will useful to add a map to location a project of building or for sending articles to your clients.