"Creación de Mapas Android" con Marcadores usando la API de Google Maps

Realizadores:
Jhon Alejandro Vargas Gil (Desarrolladores Dispositivos Móviles).
Carlos Manuel Núñez López (Desarrolladores Dispositivos Móviles).
Cartago, Valle del Cauca
1
Ejercicio Día 3
1. Realizar un mapa con los siguientes destinos de Cartago, Valle del Cauca.
 Centro de Tecnologías Agroindustriales
Latitud: 4.745401
Longitud: -75.914672
 Parque de la Salud
Latitud: 4.739865
Longitud: -75.914790

Realizadores:
2
Solución
1. Ingresamos a eclipse y hacemos lo siguiente:
Luego de haber hecho esto, nos aparecerá la siguiente pantalla y en ella le daremos un nombre a
nuestra aplicación, el nombre del paquete, la versión mínima requerida para visualizar nuestra
aplicación desde un dispositivo y la versión máxima de compilación, luego de esto damos clic en
siguiente.
1
2 3
Damos clic

Realizadores:
3
Posteriormente seleccionamos la ubicación donde guardaremos nuestro proyecto, luego clic en
siguiente
Posteriormente escogemos el icono que tendrá nuestra aplicación, en este caso escogeremos el
que viene por defecto (Opcional). Luego de esto damos clic en siguiente.
Damos clic
Ubicación donde se
guardará nuestro
proyecto.
Damos clic aquí si
queremos cambiar
nuestro icono.
Damos clic

Realizadores:
4
Después nos aparecerá esta pantalla en la cual seleccionaremos la primera opción y daremos clic
en siguiente
Por último le damos un nombre a nuestra activity (en este caso será Ejercicio3 “Opcional”). Y
damos clic en finalizar.
Seleccionamos
esta opción
Damos clic
Nombre de
nuestra Activity.
Damos clic

Realizadores:
5
Luego de ello visualizaremos esto.
Antes de continuar, revisar el Tutorial_para_Configurar_la_Api_de_Google_Maps y realizar los
pasos allí mencionados.
Posteriormente ingresaremos al .xml de nuestra activity; donde seleccionamos su contenido y
borraremos todo a excepción de la primera línea de código que es la siguiente:
Luego ingresamos el siguiente código en nuestro archivo .xml de la activity:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<fragment
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.google.android.gms.maps.SupportMapFragment"
/>
.xml de nuestra
activity

Realizadores:
6
</LinearLayout>
Después de haber hecho esto visualizamos como quedo nuestra activity.
Luego necesitamos vincular nuestro proyecto con la librería de googleplayservices. Lo haremos de
la siguiente manera:
1

Realizadores:
7
Luego de ello daremos clic en el ítem siguiente:
2
Damos clic en
este ítem.

Realizadores:
8
Y después visualizaremos la siguiente ventana, en la cual daremos clic en browse:
Después visualizaremos la siguiente ventana en la cual buscaremos el siguiente directorio
(C:Androidandroid-sdkextrasgooglegoogle_play_services) para extraer la librería de
googleplayservices que necesitamos, en este caso este es mi directorio, tenga en cuenta que el
directorio varía dependiendo la ubicación del sdk. Luego de haber hecho esto damos clic en
aceptar.
Damos clic
browse.

Realizadores:
9
1
2
3
4
5
6
Damos clic en
aceptar.

Realizadores:
10
Y visualizaremos la siguiente ventana en donde solo seleccionaremos lo que necesitamos y damos
clic en finalizar.
Y deberá aparecer en nuestro lado izquierdo donde están ubicados nuestros proyectos la librería
que acabamos de agregar.
Seleccionamos
solo esta librería.
Damos clic en
finish.

Realizadores:
11
Luego de haber hecho esto tendrás que vincular tu proyecto (Ejercicio3) con la librería (google-
play-services_lib). Lo cual se hará de la siguiente manera.
Primero damos clic derecho sobre nuestro proyecto (en este caso Ejercicio3) y luego buscamos
properties y damos clic.
Visualizamos que
se nos ha agregado
la librería.

Realizadores:
12
Al hacer lo anterior nos debe aparecer la siguiente ventana:
Luego buscamos en la parte izquierda Android y damos clic y luego de ello en lo que se nos
visualiza en la parte derecha nos deslizamos al final y al hacer esto nos debe aparecer lo siguiente:
Damos clic
derecho sobre
nuestro proyecto.
Luego damos clic
en properties

Realizadores:
13
Luego de ello visualizaremos la siguiente ventana, en la cual daremos OK.
Buscamos Android
y damos clic.
Nos dirigimos al
final de esto y
damos clic en Add.
Seleccionamos la
librería.
Damos clic.

Realizadores:
14
Luego de realizar esto, aparecerá la siguiente ventana en donde seleccionaremos nuestra librería y
luego damos clic en OK.
Al hacer esto ya tendremos vinculado nuestro proyecto con la librería.
Seleccionamos
nuestra librería.
Damos clic.

Realizadores:
15
Luego nos dirigimos a nuestra clase principal de java perteneciente a nuestra activiy.
Luego copiamos el siguiente código. Y después visualizaremos nuestra aplicación en nuestro
emulador.
public class Ejercicio3 extends FragmentActivity {
GoogleMap googleMap;
String lati = "4.745401";
String longi = "-75.914672";
String lati2 = "4.739865";
String longi2 = "-75.914790";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ejercicio3);
//Disponibilidad de los servicios de google
int status =
GooglePlayServicesUtil.isGooglePlayServicesAvailable(getBaseContext());
if(status!=ConnectionResult.SUCCESS){ // Los servicios de google play no
estan
Damos clic

Realizadores:
16
int requestCode = 10;
Dialog dialog = GooglePlayServicesUtil.getErrorDialog(status, this,
requestCode);
dialog.show();
}else { // Google Play Services are available
SupportMapFragment supportMapFragment = (SupportMapFragment)
getSupportFragmentManager().findFragmentById(R.id.map);
// Getting a reference to the map
googleMap = supportMapFragment.getMap();
// Enable MyLocation Button in the Map
googleMap.setMyLocationEnabled(true);
cargarSena();
// Setting a click event handler for the map
googleMap.setOnMapClickListener(new OnMapClickListener() {
@Override
public void onMapClick(LatLng latLng) {
// Creating a marker
MarkerOptions markerOptions = new MarkerOptions();
// Setting the title for the marker.
// This will be displayed on taping the marker
markerOptions.title(latLng.latitude+ " : " +
latLng.longitude);
// Setting the position for the marker
markerOptions.position(latLng);
// Clears the previously touched position
googleMap.clear();
// Animating to the touched position
googleMap.animateCamera(CameraUpdateFactory.newLatLng(latLng));
// Placing a marker on the touched position
googleMap.addMarker(markerOptions);
}
});
}
// SupportMapFragment fm =
(SupportMapFragment)getSupportFragmentManager().findFragmentById(R.id.map);
// googleMap = fm.getMap();
//

Realizadores:
17
// googleMap.setMyLocationEnabled(true);
}
private void cargarSena() {
// TODO Auto-generated method stub
// Clears the previously touched position
googleMap.clear();
// Creating a marker
MarkerOptions markerOptions = new MarkerOptions();
// declaramos la posicion del marcador
LatLng pos = new LatLng(Double.parseDouble(lati),
Double.parseDouble(longi));
// Setting the title for the marker.
// This will be displayed on taping the marker
markerOptions.title("Centro de tecnologias
Agroindustriales");
// Setting the position for the marker
markerOptions.position(pos);
// Animating to the touched position
googleMap.animateCamera(CameraUpdateFactory.newLatLng(pos));
pos = new LatLng(Double.parseDouble(lati2),
Double.parseDouble(longi2));
markerOptions.title("Parque de la Salud");
markerOptions.position(pos);
googleMap.animateCamera(CameraUpdateFactory.newLatLng(pos));
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {

Realizadores:
18
// Inflate the menu; this adds items to the action bar if it is
present.
getMenuInflater().inflate(R.menu.ejercicio3, menu);
return true;
}
Luego de ello debemos dar clic en nuestro manifest de nuestro proyecto y en este
ingresamos el siguiente código, con este damos los permisos necesarios para que
funcione nuestro mapa. Copiamos el código resaltado.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.adsi.ejercicio3"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="10"
android:targetSdkVersion="18" />
<permission
android:name="com.adsi.ejercicio3.permission.MAPS_RECEIVE"
android:protectionLevel="signature"/>
<uses-permission android:name="com.adsi.ejercicio3.permission.MAPS_RECEIVE"
/>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<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"/>
<uses-feature
android:glEsVersion="0x00020000"
android:required="true" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme"
>
<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value="AIzaSyC0tcfccKer88liPFtTviDMmRxaSs-EaAw" /> Huella digital

Realizadores:
19
<meta-data
android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version"
/>
<activity
android:name="com.adsi.ejercicio3.Ejercicio3"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Luego de ello visualizaremos en nuestro emulador o dispositivo el mapa con los
respectivos marcadores propuestos en el ejercicio.

"Creación de Mapas Android" con Marcadores usando la API de Google Maps

Recomendados

Recomendados

Más contenido relacionado

Similar a "Creación de Mapas Android" con Marcadores usando la API de Google Maps

Similar a "Creación de Mapas Android" con Marcadores usando la API de Google Maps (20)

"Creación de Mapas Android" con Marcadores usando la API de Google Maps