Jugando con la API de Google Maps (VII) – marcando el mapa

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