Desplegando Google Maps en nuestra Aplicación Android

Desplegando Google Maps en nuestra Aplicación Android

Desplegando Google Maps en nuestra Aplicación Android

Muchas aplicaciones, no todas pero en las que necesitamos colocar un Mapa de Google, sea para Mostrar tu ubicación o la de tu negocio necesitas saber desplegar correctamente para que funcione sin problemas ni contratiempos, logrando así darle otro nivel a tu aplicación y conseguir el objetivo que tenias en mente con un mapa de Google, en este artículo te enseñaremos como hacerlo.

Android Manifest XML

Abre el archivo AndroidManifest.xml de tu proyecto y agrega lo siguiente

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.collectivecloudperu.tutorialgooglemaps">

    <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">

 

        <meta-data

            android:name="com.google.android.geo.API_KEY"

            android:value="@string/google_maps_key" />

 

        <activity android:name=".MainActivity"

            android:label="@string/title_activity_maps">

 

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

 

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

 

        </activity>

    </application>

 

</manifest>

Clase Main Activity

Debes crear un archivo Java con el nombre que desees, nosotros usaremos el nombre MainActivity.java luego abre tu archivo  y agrega lo siguiente

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

package com.collectivecloudperu.tutorialgooglemaps;

 

import android.support.v4.app.FragmentActivity;

import android.os.Bundle;

 

import com.google.android.gms.maps.CameraUpdateFactory;

import com.google.android.gms.maps.GoogleMap;

import com.google.android.gms.maps.OnMapReadyCallback;

import com.google.android.gms.maps.SupportMapFragment;

import com.google.android.gms.maps.model.LatLng;

import com.google.android.gms.maps.model.MarkerOptions;

 

public class MainActivity extends FragmentActivity implements OnMapReadyCallback {

 

    private GoogleMap mMap;

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        

        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()

                .findFragmentById(R.id.map);

        mapFragment.getMapAsync(this);

    }

 

    @Override

    public void onMapReady(GoogleMap googleMap) {

        mMap = googleMap;

 

        // Agregamos un marcador en Lima y movemos la cámara

        LatLng ubicacion = new LatLng(-12.0560155, -77.0617879);        

        mMap.moveCamera(CameraUpdateFactory.newLatLng(ubicacion));

    }

}

 

Recursos

Layout

Ve a tu carpeta res > layout  allí crea el archivo de recurso de actividad para el mapa, ponle el nombre activity_main.xml y agregale lo siguiente

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">

 

    <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=".MainActivity" />

 

</android.support.constraint.ConstraintLayout>

Values

Vamos a la carpeta res > values y creamos un archivo XML con el nombre google_maps_api.xml y otro con el nombre strings.xml agregamos lo siguiente

google_maps_api.xml:

1

2

3

4

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">ACÁ PEGA TU GOOGLE API KEY</string>

</resources>

strings.xml:

1

2

3

4

<resources>

    <string name="app_name">Tutorial Google Maps</string>

    <string name="title_activity_maps">Google Maps</string>

</resources>

 

Gradle App

En el archivo build.gradle(Module: app) agregamos los servicios  de Google Maps

1

implementation 'com.google.android.gms:play-services-maps:15.0.1'

El código completo nos quedaría asi

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

apply plugin: 'com.android.application'

 

android {

    compileSdkVersion 27

    defaultConfig {

        applicationId "com.collectivecloudperu.tutorialgooglemaps"

        minSdkVersion 23

        targetSdkVersion 27

        versionCode 1

        versionName "1.0"

        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

    }

    buildTypes {

        release {

            minifyEnabled false

            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

        }

    }

}

 

dependencies {

    implementation fileTree(dir: 'libs', include: ['*.jar'])

    implementation 'com.android.support:appcompat-v7:27.1.1'

    implementation 'com.google.android.gms:play-services-maps:15.0.1'

    implementation 'com.android.support.constraint:constraint-layout:1.1.2'

    testImplementation 'junit:junit:4.12'

    androidTestImplementation 'com.android.support.test:runner:1.0.2'

    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

}

 

Probando nuestro Mapa

Ejecutamos el emulador para correr nuestro mapa

Genial ya tenemos nuestro Mapa para nuestra aplicación, ahora agreguemos 3 funciones y jugamos con nuestro mapa, el zoom mínimo, zoom máximo y un marcador para la ubicación

1

2

3

mMap.setMinZoomPreference(6.0f);

mMap.setMaxZoomPreference(14.0f);

mMap.addMarker(new MarkerOptions().position(ubicacion).title("Una Ubicación"));

El código completo quedaría así

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

package com.collectivecloudperu.tutorialgooglemaps;

 

import android.support.v4.app.FragmentActivity;

import android.os.Bundle;

 

import com.google.android.gms.maps.CameraUpdateFactory;

import com.google.android.gms.maps.GoogleMap;

import com.google.android.gms.maps.OnMapReadyCallback;

import com.google.android.gms.maps.SupportMapFragment;

import com.google.android.gms.maps.model.LatLng;

import com.google.android.gms.maps.model.MarkerOptions;

 

public class MainActivity extends FragmentActivity implements OnMapReadyCallback {

 

    private GoogleMap mMap;

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        

        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()

                .findFragmentById(R.id.map);

        mapFragment.getMapAsync(this);

    }

 

    @Override

    public void onMapReady(GoogleMap googleMap) {

        mMap = googleMap;

 

        // Agregamos un marcador en Lima y movemos la cámara

        LatLng ubicacion = new LatLng(-12.1108346, -76.9945131);

        mMap.setMinZoomPreference(6.0f);

        mMap.setMaxZoomPreference(14.0f);

        mMap.addMarker(new MarkerOptions().position(ubicacion).title("Una Ubicación"));

        mMap.moveCamera(CameraUpdateFactory.newLatLng(ubicacion));

    }

}

Y tenemos el zoom mínimo (6.0 f), zoom máximo(14.0 f) y un marcador con la ubicación especificada en el Mapa

API KEY Google

Para obtener tu API Key de Google ve a la consola de Google Cloud luego a API y servicios > Credenciales, si no te aparece un KEY tienes que crear una nueva aplicación y el sistema te genera una KEY, copia el KEY y pégalo en el archivo google_maps_api.xml que mencionamos más arriba

Nota

  • El Orden de los pasos mencionado puede variar en las nuevas versiones de Android Studio, hasta la fecha de este artículo, los pasos son los correctos.
  • Estamos usando Android Studio 3.1.3 la ultima versión actualizada hasta la fecha de este articulo.
  • Ese tutorial lo trabajamos con Android 6 – SDK 27.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

\\fuente collectivecloudperu