Google Maps - Windows Form

Esta entrada está dedicada a .NET. Para las entradas de .NET las realizaré con Visual Studio 2010 en C#.  En esta entrada realizaremos una aplicación Windows que incluya lo que hemos realizado hasta ahora de Google Maps. Es decir una aplicación de ventana con un navegador embebido que nos muestre nuestro mapa. Primero mostrare como realizarlo de la manera más sencilla y posteriormente veremos cómo modificar el html desde nuestro código.

Para comenzar en la forma sencilla explicaré los pasos a realizar sin necesidad de pararnos a ver código. Primero crearemos un nuevo proyecto de 'Aplicación de Windows Forms'. Para comenzar en el diseñador del formulario agregaremos un control llamado "WebBrowser". El siguiente paso es agregar el html a nuestra solución. Basta con copiar el fichero a nuestra solución. Lo siguiente que debemos hacer es a la hora de cargar el formulario o si queremos que se cargue al pulsar un boton etc en el evento Click del botón. El control WebBrowser posee un método que es Navigate(string urlString) con este método navegaremos a la url que le pasemos como parámetro. Podemos escribir la dirección de un archivo html de nuestro html y este se cargará en nuestro WebBrowser. Debemos pasarle la dirección de nuestro html con los mapas (recordar que es una ruta relativa pues lo hemos agregado a nuestra solución). Veamos el resultado:

A continuación, realizaré un ejemplo en el que nuestro html tan solo presentará un mapa que cargue una dirección escrita en nuestro formulario. Para ello crearemos un proyecto cómo el anterior. Desanclaremos el WebBrowser para que no ocupe toda la ventana y añadiremos un TextBox y un Button. Veamos:

Lo siguiente que haremos será traer el html con nuestro mapa. En este caso el html será tan solo un mapa que carga una dirección inicial y nos servirá de plantilla. Los pasos que vamos a seguir son: añadir etiquetas de identificación en el html, incrustar nuestro html al compilar el proyecto, obtenerlo en tiempo de ejecución modificar la dirección inicial del mapa del html, guardarlo en el directorio temp de nuestro sistema y cargarlo en el navegador.

Comencemos con los pasos. Inicialmente en nuestro html poseo un string con la dirección inicial. Este string ahora será "[[ADDRESS]]" (incluyendo las comillas). Esto nos servirá como etiqueta para identificarlo cuando debamos modificarlo en tiempo de ejecución. Lo siguiente que debemos hacer es incrustar el html a la hora de la compilación. Con esto conseguiremos que al compilar no creemos el html con el contenido, si no que irá incrustado en nuestro ejecutable. Para ello en el explorador de soluciones haremos click derecho en el html e iremos a propiedades. En la propiedad 'Acción de compilación' seleccionaremos 'Recurso incrustado' y la propiedad 'Espacio de nombres de la herramienta personalizada' debemos escribir el espacio de nombres de nuestra aplicación. 

Con esto ya hemos conseguido incrustar nuestro html. Lo siguiente que debemos hacer es obtener este recurso incrustado. Esto lo podemos realizar con la siguiente función:

 
  public string GetFromResources(string resourceName)
        {
            Assembly assem = this.GetType().Assembly;
            using (Stream stream = assem.GetManifestResourceStream(resourceName))
            {
                try
                {
                    using (StreamReader reader = new StreamReader(stream))
                    {
                        return reader.ReadToEnd();
                    }
                }
                catch (Exception e)
                {
                    throw new Exception("Error de acceso al Recurso: '" + resourceName + "'\r\n" + e.ToString());
                }
            }
        }

Con esta función devolvemos un string con todo el html. Esto lo recogeré en un StringBuilder en el evento Click del botón y en este StringBuilder realizaremos un reemplazo de [[ADDRESS]] por lo que haya escrito en el TextBox. Con esto habremos modificado el html para que muestre nuestra dirección. Lo siguiente y último será guardar nuestro fichero en la carpeta de temporal, guardaremos el archivo con la siguiente función:

 
  public bool CrearFicheroTexto(string Fichero, StringBuilder Contenido)
        {
            // Validaciones
            string Ruta = Path.GetDirectoryName(Fichero);
            if (!Directory.Exists(Ruta))
            {
                Directory.CreateDirectory(Ruta);
            }
            if (File.Exists(Fichero))
            {
                File.Delete(Fichero);
            }

            StreamWriter sw = File.CreateText(Fichero);
            sw.Write(Contenido.ToString());
            sw.Close();
            return true;
        }

Para obtener la dirección de los archivos temporales usaremos Environment.GetEnvironmentVariable("TEMP");  a esta dirección le añadiremos el nombre que queramos dar a nuestro html, por ejemplo "\google.htm". Una vez guardado el fichero debemos cargarlo con el evento Navigate del WebBrowser. Veamos cómo quedaría el evento Click del botón:

 
private void botCargar_Click(object sender, System.EventArgs e)
        {
            StringBuilder textoHtml = new StringBuilder();
            // Entorno
            textoHtml.AppendLine(GetFromResources("BlogGMap.mapa.html"));
            string TempFolder = Environment.GetEnvironmentVariable("TEMP");

            textoHtml.Replace("[[ADDRESS]]", tbDireccion.Text);

            string ficheroTemporalHTML = TempFolder + @"\" + "google.htm";
            bool existeFichero = false;
            try
            {
                existeFichero = CrearFicheroTexto(ficheroTemporalHTML, textoHtml);

            }
            catch (Exception ex)
            {
                MessageBox.Show(this.Text, ex.Message, MessageBoxButtons.OK, MessageBoxIcon.Error);
            }

            if (existeFichero)
            {
                this.wbGMap.Navigate(ficheroTemporalHTML);
            }
        }

Y el resultado final:

Podemos descargar la solución de aquí: Descargar

Nota: Se recomienda que la propiedad ScriptErrorsSuppressed del WebBrowser este a true.

Google Maps - Windows Form - Parte 2
Google Maps - Windows Form - Parte 3