Mis favoritos | Español | Acceder

Aspectos básicos del API de Google Maps para Flash

Latitudes y longitudes

En los tutoriales, te hemos enseñado a inicializar un mapa de modo que esté centrado en una ubicación mediante el uso de un objeto LatLng. Este objeto LatLng proporciona el medio básico para hacer referencia a ubicaciones en el mapa dentro del API de Google Maps para Flash. El objeto LatLng se crea mediante el traspaso de sus parámetros en orden { latitud, longitud }, tal como se hace tradicionalmente en cartografía:

var myGeographicCoordinates:LatLng = new LatLng(myLatitude, myLongitude);

Nota: the process of turning an address into a geographic point is known as geocoding and is discussed in detail in the Google Maps API for Flash Services section.

También resulta igualmente útil definir los límites geográficos de un objeto. Por ejemplo, un mapa muestra una "ventana" actual de todo el mundo en un objeto que se conoce como ventana gráfica. Al ser rectangular, la ventana gráfica se puede definir mediante los puntos de sus esquinas. El objeto LatLngBounds ofrece esta función, definiendo una región rectangular mediante dos objetos LatLng que representan las esquinas sudoeste y noreste del cuadro de límites, respectivamente.

Los objetos LatLng tienen diversos usos dentro de esta API. El objeto com.google.maps.overlays.Marker toma un LatLng del constructor y coloca un marcador de superposición en el mapa en una ubicación geográfica concreta.

El siguiente ejemplo utiliza getLatLngBounds() para devolver la ventana gráfica actual y coloca 10 marcadores aleatoriamente en el mapa, dentro de los límites:

private function onMapReady(event:MapEvent):void {
  setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);

  // Add 10 markers to the map at random locations
  var bounds:LatLngBounds = getLatLngBounds();
  var southWest:LatLng = bounds.getSouthWest();
  var northEast:LatLng = bounds.getNorthEast();
  var lngSpan:Number = northEast.lng() - southWest.lng();
  var latSpan:Number = northEast.lat() - southWest.lat();
  for (var i:int = 0; i < 10; i++) {
	var newLat:Number = southWest.lat() + (latSpan * Math.random());
	var newLng:Number = southWest.lng() + (lngSpan * Math.random());
    var latlng:LatLng = new LatLng(newLat, newLng);
    addOverlay(new Marker(latlng));
  }
}

Ver ejemplo (MapMarkers.html)

Ver código fuente (MapMarkers.mxml)

Nota: more information on Marker objects is within the Overlays section.

Inicialización del mapa con MapOptions

En los tutoriales anteriores, te hemos enseñado a inicializar un mapa dentro de un controlador de evento MapEvent.MAP_READY. No obstante, este evento no es adecuado para la definición de parámetros de inicialización comunes como, por ejemplo, el centro del mapa, el nivel de zoom o MapType, dado que este evento sólo se activa después de haber dibujado un mapa predeterminado. La definición de estos parámetros de mapa dentro del controlador requiere que el mapa vuelva a colocarse y dibujarse, lo que resulta poco eficiente.

El API de Google Maps para Flash proporciona un evento alternativo para el control y la configuración de las opciones comunes del mapa: MapEvent.MAP_PREINITIALIZE. Este evento se activa una vez que el mapa está preparado para recibir parámetros de inicialización, pero antes de que el mapa esté listo para un uso generalizado. De hecho, sólo se permite un método Map dentro de este controlador de evento: el método Map.setInitOptions(), que transmite un objeto MapOptions.

Para inicializar un método Map con un objeto MapOptions, sigue estos pasos:

  1. Declara un controlador de evento MapEvent.MAP_PREINITIALIZE dentro de código ActionScript o dentro de parámetros mapevent_mappreinitialize MXML.
  2. Define el controlador de evento, por lo general como una función private.
  3. Dentro de dicho controlador de evento, crea un objeto MapOptions y asígnale propiedades.
  4. Ejecuta el método setInitOptions() en Map, transmitiendo el objeto MapOptions definido. Ten en cuenta que setInitOptions sólo se debe ejecutar dentro de este evento MapEvent.MAP_MAPPREINITIALIZE.

El objeto MapOptions admite un conjunto de parámetros de inicialización para el objeto Map. En la MapOptionsreferencia del API puedes consultar una lista completa de parámetros.

El siguiente código configura un mapa con diversas opciones. Ten en cuenta que hemos configurado el centro, el zoom y MapType completamente dentro del evento onMapInitialization().

	
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <maps:Map xmlns:maps="com.google.maps.*" mapevent_mappreinitialize="onMapPreinitialize(event)" 
	 id="map" width="100%" height="100%" key="your_api_key"/>
  <mx:Script>
	<![CDATA[

	import com.google.maps.LatLng;
	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
	import com.google.maps.MapOptions;

	private function onMapPreinitialize(event:Event):void {
	  var myMapOptions:MapOptions = new MapOptions();
	  myMapOptions.zoom = 14;
	  myMapOptions.center = new LatLng(40.736072,-73.992062);
	  myMapOptions.mapType = MapType.NORMAL_MAP_TYPE;
	  this.map.setInitOptions(myMapOptions);
	}
	
	]]>
  </mx:Script>
</mx:Application>

Ver ejemplo (MapOptionsInit.html)

Ver código fuente (MapOptionsInit.mxml)

Configuración de la clave de API

En los tutoriales se ilustran varias formas de declarar la clave de API de los mapas dentro del API de Google Maps para una aplicación Flash:

  • (Flex) dentro del parámetro key de Map MXML,
  • (Flash CS3) dentro del código ActionScript, mediante la configuración del parámetro key de Map directamente,
  • (Flex y Flash) dentro de las etiquetas <object> y <embed> HTML (con el parámetro flashVars).

Estos métodos también se describen a continuación.

Configuración de la clave de API en aplicaciones Flex

En el caso de las aplicaciones Flex, la clave de Map se debe definir directamente dentro de la declaración MXML. La siguiente declaración MXML demuestra este uso.

<maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" 
  width="100%" height="100%" key="your_api_key"/>

Al definir el parámetro key del mapa en la declaración MXML, se compila la clave del API en el archivo SWF resultante directamente. Esta acción es equivalente a definir la propiedad key en el constructorMap. La clave se definirá antes de que el mapa reciba cualquier evento o acción.

Configuración de la clave de API en aplicaciones Flash CS3

En el caso de las aplicaciones Flash, no se crea ningún objeto MXML, por lo que en su lugar deberás definir la clave de Map dentro del código ActionScript en cuanto se te presente la primera oportunidad, antes de que el mapa reciba cualquier evento o acción.

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;

var map:Map = new Map();
map.key = "your_api_key";

map.addEventListener(MapEvent.MAP_PREINITIALIZE, onMapPreinitialize);

function onMappreinitialize(event:MapEvent):void {
  setInitOptions(
    new MapOptions({
      center: new LatLng(40.736072,-73.992062),
      zoom: 14,
      mapType: MapType.NORMAL_MAP_TYPE
    }));
}

Ten en cuenta que la clave de API se define inmediatamente después de la variable map. Esta acción es muy recomendable, ya que la clave debe estar definida antes de que el mapa reciba cualquier evento o acción.

Al definir el parámetro key del mapa de esta forma, también se compila la clave de API directamente en el archivo SWF resultante.

Configuración de la clave de API en el archivo HTML

Si no compilas la clave del API de Google Maps en tu archivo SWF directamente, deberás proporcionarla dentro de los parámetros <object> y <embed> flashVars, tal como se muestra a continuación:

  <div id="map_canvas" name="map_canvas">
    <object
      classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
      width="800px"
      height="600px">
      <param name="movie" value="MapSimple.swf">
      <param name="quality" value="high">
      <param name="flashVars" value="key=your_api_key">
      <embed
        width="800px"
        height="600px"
        src="MapSimple.swf"
        quality="high"
        flashVars="key=your_api_key"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
        type="application/x-shockwave-flash">
      </embed>
    </object>
  </div>

Si los valores key se especifican aquí, anularán cualquier clave compilada dentro del archivo SWF. Además, ten en cuenta que la clave de API debe coincidir con el dominio en el que se encuentra alojado el archivo SWF, no con el dominio donde se encuentra alojado el archivo HTML.

El hecho de proporcionar una clave de API dentro de un archivo HTML tiene algunas ventajas: si cambias el dominio de tu archivo SWF o lo compartes con otros usuarios, por ejemplo, sólo tendrás que cambiar la clave dentro del archivo host HTML. Además, este método funciona en los archivos SWF Flash y Flex.

Localización

El API de Google Maps para Flash utiliza la configuración de idioma preferido del navegador para mostrar información textual como, por ejemplo, nombres de controles, avisos de copyright e instrucciones de circulación. Si deseas cambiar este comportamiento e ignorar la configuración de idioma del navegador y forzarlo a que muestre la información en un idioma concreto, puedes definir directamente una propiedad language en el objeto Map para un código de idioma compatible. Como ocurre con las claves de API, puedes definir la propiedad Map.language dentro del código ActionScript o MXML o definir la propiedad de idioma dentro del parámetro flashVars del contenedor HTML.

Por ejemplo, para mostrar una aplicación del API de Google Maps para Flash en alemán, define la propiedad language en de, tal como se muestra a continuación:

<maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" 
  width="100%" height="100%" language="de" key="your_api_key"/>

Nota: actualmente existe un problema de Adobe que afecta a la detección de idioma en los reproductores Flash en Internet Explorer 6/7. Ten en cuenta que es posible que la detección de idioma en este navegador no funcione debidamente en este momento.

Consulta también las preguntas frecuentes sobre la lista de idiomas de dominio compatible. Ten en cuenta que esta lista puede no ser exhaustiva, ya que actualizamos los idiomas admitidos con frecuencia.

Atributos de mapa

De forma predeterminada, los mapas se muestran con el API de Google Maps para Flash y títulos "pintados" estándar. No obstante, el API para Flash también es compatible con otros tipos de mapas. Los tipos de mapas estándar son los siguientes:

  • NORMAL_MAP_TYPE: la vista predeterminada.
  • SATELLITE_MAP_TYPE: imágenes de satélite de Google Earth.
  • HYBRID_MAP_TYPE: mezcla de vistas normales y de satélite.
  • PHYSICAL_MAP_TYPE: un mapa de relieve físico de la superficie de la Tierra.
  • DEFAULT_MAP_TYPES: una mezcla de estos cuatro tipos, útil para un desarrollo iterativo.
  • Puedes utilizar la propiedad mapType de MapOptions para establecer el tipo de mapa. Por ejemplo, el siguiente código define el mapa para que use la vista de satélite de Google Earth:

    private function onMapPreinitialize(event:Event):void {
      var myMapOptions:MapOptions = new MapOptions();
      myMapOptions.zoom = 14;
      myMapOptions.center = new LatLng(40.736072,-73.992062);
      myMapOptions.mapType = MapType.SATELLITE_MAP_TYPE;
      this.map.setInitOptions(myMapOptions);
    }
    

    Un mapa también contiene varios atributos cuya determinación puede resultar útil. Por ejemplo, para conocer las dimensiones de la ventana de visualización actual, utiliza el método getLatLngBounds() de la interfaz Map para obtener un valor LatLngBounds.

    Cada mapa contiene también un nivel de acercamiento, que define la resolución de la vista actual. En la vista normal de los mapas se pueden emplear los niveles de acercamiento entre el 0 (el nivel más bajo, que permite ver todo el mundo en un mapa) y el 19 (el más alto, que llega a mostrar edificios concretos). Los niveles de acercamiento varían dependiendo de la parte del mundo que estés observando. En algunos lugares, los datos están mejor definidos que en otros. En la vista por satélite se pueden observar hasta 20 niveles de acercamiento.

    Puedes recuperar el nivel de zoom actual que está utilizando el mapa gracias al método getZoom() de la interfaz Map.

    Interacciones con el mapa

    Ahora que dispones de una implementación de la interfaz Map, puedes comenzar a interactuar con ella. El objeto básico de mapa tiene un aspecto y comportamiento similar al del mapa con el que interactúas en el sitio web de Google Maps e incorpora muchos comportamientos integrados. La interfaz Map también proporciona métodos de configuración que permiten alterar el comportamiento del objeto de mapa en sí.

    De forma predeterminada, los objetos de mapa tienden a reaccionar ante la actividad del usuario del mismo modo que en http://maps.google.com. No obstante, puedes modificar este comportamiento empleando distintos métodos. Por ejemplo, el método Map.disableDragging() desactiva la capacidad de hacer clic y arrastrar el mapa a una nueva ubicación.

    También puedes interactuar con el mapa mediante la programación. La interfaz Map proporciona métodos que permiten alterar el estado del mapa directamente. Por ejemplo, los métodos setCenter(), panTo() y zoomIn() operan sobre el mapa mediante la programación, en lugar de la interacción del usuario.

    El siguiente ejemplo muestra un mapa, espera dos segundos y se desplaza a un nuevo punto central. El método panTo centra el mapa en un punto determinado. Si el punto especificado se encuentra en la parte visible del mapa, el mapa se desplaza suavemente al punto. De lo contrario, salta directamente a él.

    // Note: this example uses the best practice of using a Timer object
    private function onMapReady(event:MapEvent):void {
      setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);		
      myTimer = new Timer(1000, 1);
      myTimer.addEventListener("timer", timedFunction);
      myTimer.start();
    }
    
    private function timedFunction(eventArgs:TimerEvent):void {
      panTo(new LatLng(37.4569, -122.1569));
    }
    

    Ver ejemplo (MapAnimate.html)

    Ver código fuente (MapAnimate.mxml)

    Ventanas de información

    Cada mapa del API de Google Maps para Flash puede mostrar una única "ventana de información" del tipo InfoWindow, en la que puede aparecer texto o código HTML. La ventana de información tiene un aspecto ligeramente parecido al de una burbuja de diálogo de un cómic. Tiene un área de contenido y un pico afilado, cuyo extremo se encuentra en un punto especificado del mapa. Para ver la ventana de información en acción, haz clic en un marcador de Google Maps.

    El objeto InfoWindow no tiene constructor. Al crear el mapa, se creará automáticamente una ventana de información que se incluirá en dicho mapa. No es posible mostrar más de una ventana de información al mismo tiempo para un mapa concreto, pero sí puedes mover la ventana de información y modificar su contenido según sea necesario.

    El objeto Map proporciona un método openInfoWindow(), que utiliza un objeto LatLng y un objeto InfoWindowOptions para rellenar la ventana de información con contenido. El objeto openInfoWindow() añade un objeto de visualización (DisplayObject) al contenedor de la ventana de información, que se fija a la longitud y latitud especificadas.

    En el siguiente código de ejemplo aparece una ventana de información fijada al centro del mapa con un sencillo mensaje "Hello, world".

    private function onMapReady(event:MapEvent):void {
      setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
      openInfoWindow(getCenter(), new InfoWindowOptions({title: "Hello", content: "World"}));
    }
    

    Ver ejemplo (MapInfoWindow.html)

    Ver código fuente (MapInfoWindow.mxml)

    Para obtener la documentación completa acerca de las ventanas de información, consulta la referencia del API de Google Maps para Flash.