lunes, 27 de abril de 2009

Flex Google Maps - Tags y Menu Personalizado - Custom Tags and Menu - Flex 3



Translation:
Lo primero que debemos hacer para poder programar con los mapas de Google es bajarnos el api, el cual lo podemos encontrar en la siguiente dirección SDK Google Maps, luego necesitaremos una clave para poder usar el mapa de Google el cual podemos encontrarlo en esta página Google Maps Key, con estos dos requisitos estamos listos para jugar un poco con los mapas de Google, su página de ayuda tiene muchos ejemplos y cosas que podemos hacer sobre el mapa de ellos, esta ayuda la podemos encontrar en esta pagina Google Maps Doc.
The first thing we have to do to be able to develop with Google Maps is to download the API, this API we can find it in this link SDK Google Maps. The next thing we have to do to be able to use Google Map is go to a Google maps page and agree with some terms so we can get an Map Key we can get this Key in this link Google Maps Key. With these two things we are now ready to play a little with Google maps. Google Maps has a lot and very good info and doc’s and even better they have examples that can guide us through Google Map, this link is Google Maps Doc’s.



Como muchas veces no queremos lo que unos ofrece un API sino queremos jugar con varias cosas a la vez, con esto me refiero a que queremos botones más vivos tags que sean animados y aplicar nuestro propio toque a nuestras aplicaciones, Google nos ofreció algo maravilloso llamado OVERLAY un overlay traducido es una capa que se le coloca encima a algo. Los tags y las figuras básicas que ofrece Google son overlay pero Google dentro de esto nos ofrece el CUSTOM OVERLAY, ahí es donde entra nuestra imaginación. Esto lo podemos leer en la sección de ayuda de Google Maps en esta página Google Maps Custom Overlay.
Often we like to do something more complex than the API can provide, so we have to use other language to do so, with this am talking about nice buttons o tag over the map that we can animate easily or even breather, put own on touch in to the development in that we are best.
Google Offers us an tool inside the API called OVERLAY, the OVERLAY in nothing more than a layer that we can just put over the map and do most anything with it, so we can develop over custom and complex tags.

Google offers overlays so you can use their tag and some basic geometric figures, but our custom develops , you are going to use CUSTOM OVERLAY, all of Custom Overlays we can read it in this page Google Maps Custom Overlay.



En una página de adobe Daniel Terraza, un compañero de trabajo y quien me ayudo a programar este componente de prueba, vio unos tags en flex y se nos predio la luz de combinar estos tags con el Google Maps. Estos Tags los pueden conseguir en la página de Adobe como un componente simple, jajajaa cosa que para muchos principiantes en Flex no se les hará tan simple pero ellos dicen que es simple, les dejo la pagina (http://www.adobe.com/devnet/flex/samples/fig_callout/) . En tutoriales futuros hablaremos de Efectos y Transiciones, que fue como se logro este componente, hecho por Adobe, no vi el autor por ningún lado así que no lo menciono.
In a page of adobe Daniel Terrace, a fellow worker and who help me to program this map component, he saw these tags in flex and we thought that way not we out booth together, the tags with Google Maps. We can obtain this Tags in the page of Adobe like a simple component, Hear is the page (http://www.adobe.com/devnet/flex/samples/fig_callout/). In future tutorials we will speak of Effects and Transitions.

Los botones fueron Diseñados Melisa Correia, una compañera de trabajo, estos botones fueron creados usando AI y FL los cuales fueron importados como Skins usando las herramientas que brinda Adobe.

Los dos canvas con color degradado fue sacado de Gradient Canvas y su autor es Arnaud FOUCAL.

The buttons were designed Melisa Correia, a fellow worker, these buttons were created using AI and FL which were imported into flex like Skins having used the tools that Adobe offers.

The canvas with degraded color was found from Gradient Canvas and his author is Arnaud FOUCAL excellent Job me I say.






Descargar Archivo y Ver Codigo Fuente:


Download File's and Source:

12 comentarios :

  1. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  2. Hi,

    Very cool example of using GooglMap API and GradientComponents. Great job !
    The view source link doesn't work.

    Best regards.

    Arnaud

    ResponderBorrar
  3. Hola,

    Estoy utilizando la ultima SDK de Gmaps (map_flex_1_17.swc) y da el siguiente error a la hora de crear los marcadores sobre el mapa.
    Ej: myMarkersOverlay= new GroundOverlay(this,new LatLngBounds(....)):

    El error es el siguiente:
    Error #2015: Invalid BitmapData.
    at flash.display::BitmapData()
    at com.google.maps.overlays::GroundOverlay()

    Alguna idea de como solucinar el problema?

    Muchas gracias por el ejemplo. Es de mucha utilidad.

    Saludos,
    Inaki

    ResponderBorrar
  4. Que tal,

    veo que tu publicación lleva algunos meses ya, pero es justo lo que estoy necesitando en este momento.

    El problema es que no consigo compilar el proyecto ya que estan faltando los assets.

    Podrías subir una version compilable?

    Desde ya muchas gracias por tu tiempo.

    ResponderBorrar
  5. Hola, vi tu pregunta.

    Este componente es compilado con la version 3.2

    el componente que te falta es el PathfinderCustomPreloader ?

    si es ese, solo borra en la linea 6 del main lo que dice preloader = "com.-----.PathfinderCustomPreloader", el main se llama DevelopDreamGoogleMap.mxml

    ya que ese es el cargador de mis aplicaciones para que en ves de salir el cargador de flex salga el logo mio y una barra cargadora.

    ResponderBorrar
  6. tienes razon , no publique los assets. Mañana los publico.

    Mil disculpas.

    ResponderBorrar
  7. Ya publique los Assets.

    Intentalo ahora.

    Cualquier cosa vuelves a escribir, estamos abiertos a cualquier duda o arreglos.

    ResponderBorrar
  8. Gracias por tu pronta respuesta.

    Me estan surgiendo problemas de compilación: no puede resolver la ubicacion de los assets
    Y el compilador me recomienda que use getItemAt enves de los brackets [ en los values para los states del MapComponent.

    Talvez sea porque estoy usando FlashDevelop junto con el SDK 3.4 de Flex.

    Estaría muy agradecido si pudieras direccionarme en la solución de este problema.

    Un saludo.

    ResponderBorrar
  9. Inaki, ese problema se soluciona si cambias la manera en que se instancian las opciones del overlay, quitale lo que está entre corchetes ({}). No te va a dar mas ese error, pero igual no te va a servir con esa librería. Este ejemplo está hecho para la versión 1.9 de la librería de GoogleMaps (map_flex_1_9.swc), pero no corre en las últimas versiones. Le agradeceríamos al autor si pudiera subir una versión actualizada con la última librería (map_flex_1_18.swc).

    ResponderBorrar
  10. I am not able to move the menu to the top if i move also there is visibility of menu while minized is showing in the bottom could u please help me out

    ResponderBorrar
  11. When it hide it hides properly but when i click to show it the menu is displayed in the bottom please do help me out regards

    ResponderBorrar
  12. Hi, all the components are placed by x and y and some transition effects.

    do you have messenger o gtalk ? so we can talk...

    ResponderBorrar