jueves, 6 de marzo de 2014

Google Maps - Windows Form 3

Continuando las entradas acerca de Google Maps (Javascript API V3) y Windows Forms, en esta ocasión veremos la forma de cargar marcadores en nuestro mapa en diferentes puntos. Ya sean diferentes puntos a partir de una lista de direcciones o diferentes puntos a partir de una lista de coordenadas.

Direcciones

Para comenzar nos basaremos en la técnica empleada en la primera entrada acerca de GMaps y Windows Forms para mostrar una sola dirección el mapa. Aunque en este caso, la diferencia consistirá en que en la etiqueta "[[ADDRESS]]" se reemplazará por un array de direcciones y en Javascript recorreremos este array para mostrar todas las direcciones. Esto se vería de la siguiente forma:


A continuación, en el código de nuestro Windows Forms debemos generar un string con el que sustituir la etiqueta de HTML por nuestro array correctamente formado. Esto se realiza de la siguiente forma:

const string txtAddr = "[[ADDRESS]]";
        private void botCargar_Click(object sender, System.EventArgs e)
        {
            List dirs = new List();
            string arrDirs = string.Empty;
            dirs.Add("Universidad Carlos III, Av de la Universidad, Leganés");
            dirs.Add("Av. de la Universidad, 30, Leganés");
            dirs.Add("Av. de la Universidad, 28, Leganés");
            dirs.Add("Calle de Sabatini, Leganés");
            StringBuilder textoHtml = new StringBuilder();
            // Entorno
            textoHtml.AppendLine(GetFromResources("BlogGMap.mapa.html"));
            string TempFolder = Environment.GetEnvironmentVariable("TEMP");
            arrDirs = "[";
            for (int i = 0; i < dirs.Count; i++)
            {
                if (i != 0)
                {
                    arrDirs += ",";
                }
                arrDirs += "'" + dirs[i] + "'";
            }
            arrDirs += "]";
            textoHtml.Replace(txtAddr, arrDirs);


            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);
                
            }
        }

Una vez hemos realizado esto, podemos ver el resultado.



Coordenadas

Si deseamos pintar los marcadores en base a una lista de coordenadas deberemos generar desde nuestro código de C# un array con coordenadas. Es decir, un array en el que cada elemento sea un array con 2 valores, uno para la latitud y otro para la longitud. En javascript iremos recorriendo el array y generando un objeto de LatLng de la API de Google Maps. Ese objeto se enviará a una función que generará un marcador en base a esa latitud y longitud.

Nuestro Javascript quedaría de la siguiente forma:



El código C# para generar el array de coordenadas:

const string txtAddr = "[[ADDRESS]]";
        private void botCargar_Click(object sender, System.EventArgs e)
        {
            double[,] posiciones = new double[3, 2] { { 40.3309159, -3.76539 }, { 40.3318145, -3.767998 }, { 40.3334521, -3.76678 } };
            string arrDirs = string.Empty;


            StringBuilder textoHtml = new StringBuilder();
            // Entorno
            textoHtml.AppendLine(GetFromResources("BlogGMap.mapa.html"));
            string TempFolder = Environment.GetEnvironmentVariable("TEMP");
            arrDirs = "[";
            for (int i = 0; i < posiciones.GetLength(0); i++)
            {
                if (i != 0)
                {
                    arrDirs += ",";
                }
                arrDirs += "[" + posiciones[i, 0].ToString("g",new System.Globalization.CultureInfo("en-US"))
                    + "," + posiciones[i, 1].ToString("g", new System.Globalization.CultureInfo("en-US")) + "]";
            }
            arrDirs += "]";
            textoHtml.Replace(txtAddr, arrDirs);


            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);
                
            }
        }
NOTA: Los dos </string> que aparecen al final son un fallo del script que le da formato al código al subirlo.

Con lo que el resultado final se verá así:


El código de los ejemplos se puede descargar aquí.

4 comentarios:

  1. Perfector, funciona a la perfección
    Gracias.

    ResponderEliminar
  2. Muchas felicidades! funcionan perfectamente y me es de mucha utilidad en mi proyecto, ando realizando GPS para unos autos y tus entradas de Google Maps me están ayudando mucho pero que me dices de poner los marcadores haciendo click, te devuelvan latitud y longitud como en tu entrada 2 y ya puestos a soñar medir distancia entre ambos marcadores, seria un gran avance, ojala puedas hacerlo o por lo menos darme pautas para aquello te lo agradecería mucho.

    ResponderEliminar
  3. Exelente me gustaria saver al igual que Sergio Meruvia Hopp como puedo obtener las cordenadas de un punto dando doble clik y poder guardarlas en un TETXBOX me serviria de mucho si hicieras un video

    ResponderEliminar
  4. le intente con los markers y como que carga la googlemaps, sin embargo no veo nada solo el fondo del color de google maps

    ResponderEliminar