Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Customização de Mapas no Android - Google I/O Extended Pernambuco

Customização de Mapas no Android - Google I/O Extended Pernambuco

Utilizando Google Maps API + Google Play Services, é demonstrado um pouco de como é feito a estilização de mapas para Android por aplicativos como UBER, 99Taxis e FlightRadar

Palestra apresentada durante a Google I/O Extended Pernambuco em 17/05/2017.

278d0b5b8f680ac2a39bb3d8a6e21be3?s=128

Wellington Mitrut

May 17, 2017
Tweet

More Decks by Wellington Mitrut

Other Decks in Programming

Transcript

  1. CUSTOM MAPS INTRODUÇÃO A CUSTOMIZAÇÃO DE MAPAS NO ANDROID Google

    I/O Extended Pernambuco @wmitrut
  2. Wellington Mitrut @wmitrut

  3. None
  4. gdg-cascavel

  5. Os mapas são uma expressão da necessidade humana de conhecer

    e representar o seu espaço.
  6. None
  7. CARTOGRAFIA

  8. A cartografia é a ciência da representação gráfica da superfície

    terrestre, tendo como produto final o mapa. Ou seja, é a ciência que trata da concepção, produção, difusão, utilização e estudo dos mapas.
  9. CARTOGRAFIA = UX

  10. Sketch do século XIV

  11. Mapas no dia-a-dia

  12. None
  13. None
  14. Mas é tudo 100% confiável?

  15. None
  16. None
  17. Soluções

  18. None
  19. None
  20. None
  21. None
  22. None
  23. Mas a mais usada é a GOOGLE MAPS API

  24. None
  25. É possível personalizar mapas desde a versão 9.6.0 do Google

    Play Services (set/2016)
  26. Mas como eu faço isso?

  27. Google Maps API Styling Wizard

  28. None
  29. None
  30. Customiza-se o mapa e salva-se o JSON do estilo na

    pasta raw do projeto
  31. None
  32. None
  33. ~ 5Kb ~ 320 linhas

  34. None
  35. Talk is cheap. Show me The Code.

  36. 1 - Não se esqueça de colocar a SUA chave

    da Google Maps API.
  37. 2 - Implemente a View public class MapsActivity extends FragmentActivity

    implements OnMapReadyCallback { private GoogleMap mMap; private static final String TAG = MapsActivity.class.getSimpleName(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_maps); SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.map); mapFragment.getMapAsync(this); } MapsActivity.java
  38. 2 - Implemente a View <fragment xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:map="http://schemas.android.com/apk/res-auto" android:layout_width=

    "match_parent" android:layout_height= "match_parent" android:id="@+id/map" tools:context="com.custommapsgdgcvel.custommapsgdgcvel.MapsActivity" android:name="com.google.android.gms.maps.SupportMapFragment" /> activity_maps.xml
  39. 3 - Faça a Chamada do estilo e seu tratamento

    @Override public void onMapReady(GoogleMap googleMap) { try { boolean success = googleMap.setMapStyle( MapStyleOptions.loadRawResourceStyle( this, R.raw.io_pernambuco)); if (!success) { Log.e(TAG, "Falhou ao aplicar estilo."); } } catch (Resources.NotFoundException e) { Log.e(TAG, "Estilo não encontrado. Error: ", e); } mMap = googleMap; LatLng ioextended = new LatLng(-24.952327, -53.461767); mMap.addMarker(new MarkerOptions().position(ioextended).title("Google I/O Extended Pernambuco")); mMap.moveCamera(CameraUpdateFactory.newLatLng(ioextended)); } } MapsActivity.java
  40. Documentação: https://goo.gl/uhXUdN

  41. Código: https://goo.gl/GbkH60

  42. SLIDES https://speakerdeck.com/wmitrut

  43. None
  44. DÚVIDAS?

  45. Obrigado!