Mostrar coordenadas en GoogleMap con retrofit en android

En esta guía verás cómo mostrar coordenadas en Google Maps usando Retrofit en Android. Es una base útil cuando necesitas cargar ubicaciones desde un servidor y pintarlas en el mapa.

  • Consumirás datos de coordenadas con Retrofit.
  • Mostrarás marcadores en Google Maps.
  • Conectarás el ejemplo con casos reales de ubicación en Android.

Para completar el flujo, revisa también guardar coordenadas en MySQL con Retrofit y obtener coordenadas y dirección en Android.

Hola Vergasianos hoy vamos a ver un hermoso tutorial el cual se basa en consumir un servicio ósea un JSON donde te trae las coordenadas tanto latitud como longitud y luego estas convertirlas en marcadores que se mostraran en google map de Android, quiero dejar en claro algunas cosas, asi tu podrás saber si continuar o no con este tutorial, para empezar vamos usar retrofit para consumir el servicio y el patrón MVP.

Otra cosa que quiero aclarar es que no vamos utilizar una base de datos o lenguaje backend, vamos utilizar un servicio online que nos va generar el Json y nosotros podremos consumirlo de forma normal. Una ves aclarado esto no perdemos mas tiempo y continuamos con el tutorial.

Mostrar coordenadas en GoogleMap con retrofit en android

coordenada_retrofit_googleMap

Herramientas

Deben mirar el siguiente video para poder armar lo necesario al tutorial, también les dejo algunos enlaces que se utilizaran y se explica de forma clara en el video.

https://codepen.io/mmednik/pen/vmZzRy

https://jsonformatter.curiousconcept.com/

https://www.json-generator.com/

 

JSON

[
   {
      "ID":48,
      "Titulo":"Helgelandskysten",
      "Longitud":"12.63376",
      "Latitud":"66.02219",
   "Descripcion":"Punto 1"	  
   },
   {
      "ID":46,
      "Titulo":"Tysfjord",
      "Longitud":"16.50279",
      "Latitud":"68.03515",
   "Descripcion":"Punto 2"
   },
   {
      "ID":44,
      "Titulo":"Sledehunds-ekspedisjon",
      "Longitud":"7.53744",
      "Latitud":"60.08929",
   "Descripcion":"Punto 3"
   },
   {
      "ID":43,
      "Titulo":"Amundsens sydpolferd",
      "Longitud":"11.38411",
      "Latitud":"62.57481",
   "Descripcion":"Punto 4"
   },
   {
      "ID":39,
      "Titulo":"Vikingtokt",
      "Longitud":"6.96781",
      "Latitud":"60.96335",
   "Descripcion":"Punto 5"
   },
   {
      "ID":6,
      "Titulo":"Tungtvann- sabotasjen",
      "Longitud":"8.49139",
      "Latitud":"59.87111",
   "Descripcion":"Punto 6"
   }
]

 

Librerías 

//Retrofit
implementation 'com.squareup.retrofit2:retrofit:2.0.0'
implementation 'com.squareup.retrofit2:converter-gson:2.0.0'

//Google Map
implementation 'com.google.android.gms:play-services-maps:16.1.0'
implementation 'com.google.android.libraries.places:places:1.0.0'

 

AndroidManifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androfast.appmapretrofitmvp">

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        android:usesCleartextTraffic="true">
        <activity android:name=".view.MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="Aqui debes ingresar tu api key"/>
    </application>

</manifest>

Estructura

Aquí viene la parte Android, chicos tienen que ver el video para poder entender como armar el proyecto, la estructura esta basada en el patrón MVP y deberá tener lo siguiente:

modelo mvp

Dentro de cada carpeta ira las siguientes clases:

mpv google map

Coordenada

public class Coordenada {
    @SerializedName("ID")
    private String id;
    @SerializedName("Titulo")
    private String titulo;

    @SerializedName("Longitud")
    private String longitud;

    @SerializedName("Latitud")
    private String latitud;

    @SerializedName("Descripcion")
    private String descripcion;

    public Coordenada(String id, String titulo, String longitud, String latitud, String descripcion) {
        this.id = id;
        this.titulo = titulo;
        this.longitud = longitud;
        this.latitud = latitud;
        this.descripcion = descripcion;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getTitulo() {
        return titulo;
    }

    public void setTitulo(String titulo) {
        this.titulo = titulo;
    }

    public String getLongitud() {
        return longitud;
    }

    public void setLongitud(String longitud) {
        this.longitud = longitud;
    }

    public String getLatitud() {
        return latitud;
    }

    public void setLatitud(String latitud) {
        this.latitud = latitud;
    }

    public String getDescripcion() {
        return descripcion;
    }

    public void setDescripcion(String descripcion) {
        this.descripcion = descripcion;
    }
}

 

CoordenadaPresenter

public class CoordenadaPresenter {
    private CoordenadaView coordenadaView;
    private RetrofitService retrofitService;

    public CoordenadaPresenter(CoordenadaView coordenadaView) {
        this.coordenadaView = coordenadaView;
        if(this.retrofitService == null){
            this.retrofitService = new RetrofitService();
        }
    }

    public void getCoordenadas(){
        retrofitService
                .getApi()
                .getCoordenada()
                .enqueue(new Callback<List<Coordenada>>() {
                    @Override
                    public void onResponse(Call<List<Coordenada>> call, Response<List<Coordenada>> response) {
                        List<Coordenada> data = response.body();
                        if(data !=null && data.size() > 0){
                            coordenadaView.coordenadaReady(data);
                        }
                    }

                    @Override
                    public void onFailure(Call<List<Coordenada>> call, Throwable t) {
                        Log.d("ERROR", t.getMessage());
                    }
                });
    }
}

RetrofitApi

public interface RetrofitApi {
    @GET("api/json/get/cerMKoTojm")
    Call<List<Coordenada>> getCoordenada();
}

RetrofitService

public class RetrofitService {
    private Retrofit retrofit = null;

    public RetrofitApi getApi(){
        String BASE_URL="http://www.json-generator.com/";
        if (retrofit == null) {
            retrofit = new Retrofit
                    .Builder()
                    .baseUrl(BASE_URL)
                    .addConverterFactory(GsonConverterFactory.create())
                    .build();

        }
        return  retrofit.create(RetrofitApi.class);
    }
}

CoordenadaView

public interface CoordenadaView {
    void coordenadaReady(List<Coordenada> coordenadas);
}

MainActivity

public class MainActivity extends FragmentActivity implements CoordenadaView, OnMapReadyCallback {

    private GoogleMap nMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SupportMapFragment supportMapFragment =(SupportMapFragment)getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        supportMapFragment.getMapAsync(this);
    }

    @Override
    protected void onResume() {
        super.onResume();
        CoordenadaPresenter coordenadaPresenter = new CoordenadaPresenter(this);
        coordenadaPresenter.getCoordenadas();
    }

    @Override
    public void coordenadaReady(List<Coordenada> coordenadas) {
         for (Coordenada coordenada: coordenadas){
             nMap.moveCamera( CameraUpdateFactory.newLatLngZoom(new LatLng(66.02219,12.63376),4));
             nMap.addMarker(new MarkerOptions()
             .position(new LatLng(Double.valueOf(coordenada.getLatitud()),Double.valueOf(coordenada.getLongitud())))
                     .title(coordenada.getTitulo()));

         }

    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        nMap = googleMap;
    }


}

 

activity_main

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".view.MainActivity" />

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
WhatsApp chat