Google maps 3D no Flex

Novidade para aqueles que utilizam o Google Maps no Flex. Agora esta disponível a visualização 3D no Flex.

Se você nunca desenvolveu para um exemplo do Google Maps, tem dois itens que tem que ser visto antes de inicia:

• Solicitar uma Api Key para seu domínio em http://code.google.com/apis/maps/signup.html;
• Baixar a ultima versão do SDK para Flex em http://maps.googleapis.com/maps/flash/release/sdk.zip.
• Copie map_flex_1_16.swc para a pasta /libs do seu projeto Flex.

Agora você já começar a brincar. Vou explicar o exemplo Map3DSimple.mxml.

Primeiro defino a variável apikey que é definido no arquivo apiKey.txt. Após são descritas as duas funções principais que definem os principais eventos do mapa. O código esta bem comentado e logo abaixo tem quatro exemplos simples.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:maps="com.google.maps.*"
    layout="absolute">
  <mx:String id="apikey" source="apiKey.txt"/>
  <mx:Script>
    <![CDATA[
      import com.google.maps.controls.OverviewMapControl;
      import com.google.maps.controls.MapTypeControl;
      import com.google.maps.controls.ScaleControl;
      import com.google.maps.controls.NavigationControl;
      import com.google.maps.View;
      import com.google.maps.MapType;
      import com.google.maps.LatLng;
      import com.google.maps.MapOptions;
      import com.google.maps.MapEvent;
      import com.google.maps.geom.Attitude;

      /**
       * Executa método quando o mapa esta iniciando
       *
       * Neste método é adicionado as opções do mapa,
       * preenchendo a classe com.google.maps.MapOptions
       */
      private function onMapPreinitialize( event:MapEvent ):void
      {
        // Incia um novo ponto
        var myMapOptions:MapOptions=new MapOptions;
        // Define Zoom = 12
        myMapOptions.zoom=12;
        // Define o ponto que deve ser centralizado
        myMapOptions.center=new LatLng( -27.594664,-48.550874 );
        /*
           Define o tipo de mapa
           MapType.HYBRID_MAP_TYPE    ---- Mapa Hibrido, Satélite e ruas
           MapType.NORMAL_MAP_TYPE    ---- Mapa Normal
           MapType.PHYSICAL_MAP_TYPE  ---- Mapa do relevo
           MapType.SATELLITE_MAP_TYPE ---- Mapa Satélite
         */
        myMapOptions.mapType=MapType.NORMAL_MAP_TYPE;

        // Visualização em perspectiva
        myMapOptions.viewMode=View.VIEWMODE_PERSPECTIVE;
        // POntos da perspectiva
        myMapOptions.attitude=new Attitude( 0, 0, 0 );
        // passa as configurações acima para o Mapa
        map.setInitOptions( myMapOptions );
      }

      /**
       * Quando o mapa inicia, adiciona os controles do mapa
       *
       * Abaixo adiciono os controles disponíveis para o Mapa 3D
       * Os demais disponível no pacote com.google.maps.controls
       * são para controle 3D
       */
      private function onMapReady( event:MapEvent ):void
      {
        //
        map.addControl( new NavigationControl());
        // Adiciona a escala do mapa no rodapé
        map.addControl( new ScaleControl())
        // Adiciona a barra de opções no topo do Mapa
        map.addControl( new MapTypeControl())
        // Quadrado de prévia no canto inferior direito
        map.addControl( new OverviewMapControl())
      }
    ]]>
  </mx:Script>
  <maps:Map3D mapevent_mappreinitialize="onMapPreinitialize( event )"
        mapevent_mapready="onMapReady( event )"
        id="map"
        key="{ apikey }"
        width="100%"
        height="100%"/>
</mx:Application>

O código fonte esta disponível Aqui.

Gostou? Não esqueça de curtir!

Ou compartilhe o link com seus amigos