oct 052010
 

Buenas,

Vimos en un mensaje anterior cómo conseguir posicionar el mapa en una determinada longitud y latitud. Ahora vamos a ver cómo poner marcas en estas longitudes y latitudes.

Para poner una marca en el mapa no es necesario tenerlo centrado dado que ésta es relativa al mapa, no al hecho del centrado. Así pues, siguiendo el ejemplo anterior, haremos que cuando se carguen las diferentes pestañas .

La clase Marker

Para crear una marca, lo que tendremos que hacer es crear un objeto de la clase Marker, así que os recomiendo que le deis un vistazo a sus métodos y eventos. Para nuestro propósito, lo que realmente nos interesa es el constructor, el cual recibe un objeto de tipo MarkerOptions con el que podremos configurar el aspecto de nuestra marca.

Este objeto tiene las siguientes propiedades:

  • clickable: booleano que nos indicará si podemos o no hacer clic en la marca.
  • cursor: string que contiene el cursor de ratón a mostrar.
  • draggable: booleano que permitirá que la marca pueda desplazarse.
  • flat: booleano que mostrará o no la sombra de la marca.
  • icon: string o MarkerImage con el icono a mostrar para la marca.
  • map: mapa asociado donde se mostrará la marca.
  • position:LatLng donde se mostrará la marca.
  • shadow: string o MarkerImage con la imagen de sombra.
  • shape: MarkerShape que indica la región dónde se podrá hacer clic o desplazar.
  • title: string con el título (hint para que nos entendamos los Delphinianos).
  • visible: booleano para hacer o no visible la marca.
  • zIndex: numérico que indicará el orden (superposición si se diera el caso) en que se mostrarán las marcas.

Cambios en el JavaScript

A nivel de JavaScript tendremos que realizar algunos cambios. Primero crearemos una función que nos genere la marca.

  function MakeMarker(Lat, Lng, titulo) {
    var latlng = new google.maps.LatLng(Lat,Lng);
    var aMarker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: titulo
        });
    markerArray[markerArray.length] = aMarker;
  }

De esta función destacar el array markerArray que contendrá todas las marcas puestas en el mapa. Este array nos servirá para, en búsquedas posteriores, poder borrar las marcas antes de mostrar las nuevas. Esta variable se ha definido global como la variabla map.

Otra función que añadiremos es la de borrar las marcas

  function DeleteMarkers() {
    for (i = 0; i < markerArray.length; i++) {
      markerArray[i].setMap(null);
    }
    markerArray = [];
  }

Ahora sólo queda controlar esto desde Delphi.

Cambios en Delphi

Por lo que respecta a Delphi, crearemos un par de funciones

    procedure PonerMarca(const Long, Lat, Titulo: string);
    procedure BorrarMarcas;

Estas dos funciones se llamarán desde el evento AfterGetValues de la clase TGeoCode.

Puedes descargarte un ejemplo aquí (incluye ejecutable).

Nos leemos

  7 Responses to “Jugando con la API de Google Maps (VII) – marcando el mapa”

  1. Hola gracias por estos demos, me estan sirviendo mucho, una pregunta tendrás algún demo de como como capturar el evento onlick desde java sript pero que llame llamar un evento en delphi? por ejemplo si hago lcik sobre algun elemento en el mapa, obtenerlo y hacer una busqueda en base de datos desde el lado de delphi.

    Gracias

    • Hola Francisco

      Ante todo gracias por pasarte por aquí y dejar tu comentario, y pedirte perdón por la demora en contestarte, pero ando muy liado en el trabajo y me es complicado atender el “chiringuito”.

      El tema que propones lo estoy estudiando porque a mi también me interesa el tema. No obstante te explico cual es mi idea y cómo se tendría que hacer (en mi humilde opinión). La idea es que el JavaScript asociado al evento OnClic rellene los campos de un formulario de la página web. Luego, desde Delphi, ya es sencillo el leer los valores de dicho formulario.

      Aquí te dejo un enlace de cómo se hace esto de leer formularios de una página web desde Delphi y con el TWebBrowser: Manipulate Web Forms using the TWebBrowser

      Nos leemos
      cadetill

  2. Hola,
    Anterior todo felicitarte, excelente trabajo.

    tengo un pequeño problema con un mapa con muchas marcas (unas 100), en el q se producen solapamientos, es posible hacer algo para q el usuario sepa que hay más de una marca en un sitio determinado.

    Gracias

  3. Gracias, la cosa pinta muy bien.

    Aunque no es mucho de programación web voy a intentarlo.

  4. Estou testando o Componente , e ao incluir o retângulo no MAPA, não é possível arrasta-lo para outra posição como o Circulo, você só consegue arrasta-lo no momento que vc inclui, depois somente removendo e incluindo novamente.

    Pode fazer o teste no megademo.

    Obrigado

    Marcio Eduardo

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)