Академический Документы
Профессиональный Документы
Культура Документы
j
Ver código
Ir a la pregunta
Actualización (08/11/2017)
Ver demo
Para integrar Google Maps en tu aplicación es necesario que te registres en la cuenta
de Google para desarrolladores y generes el API KEY de la aplicación ya sea para
android o ios, esta te permitirá trabajar con Google Maps. Aquí dejo el link para
ingresar a generar la key Link
Una vez nos encontramos en la plataforma de google, es necesario que selecciones la
tecnología con la cual se integrará Google Maps, para este ejemplo lo trabajaremos
para la plataforma Android.
Al seleccionar la plataforma nos aparecerá una serie de textos los cuales nos explican
sobre Google Maps (esto lo puedes leer para que te enteres de todo lo que google
tiene para nosotros trabajar con mapas), en este paso vamos a dar click en la parte
superior de la ventana sobre costado derecho en el botón “Obtener una clave”.
En la ventana que se nos abre, nos dirigimos a seleccionar la opción “Crear proyecto” y
continuar.
Continuamos digitando el nombre de nuestra aplicación para con este reconocer la
clave generada por Google Maps. Yo he nombrado la app con el nombre
“MapasNativo” y este será el nombre de nuestra aplicación.
Apenas tengas lista la información, puedes pulsar el botón de “Crear” para que google
te genere el id de tu producto.
Copia esta clave API ya que con esta realizaremos la integración con Google Maps.
El siguiente paso es crear nuestra aplicación Ionic, en este caso usare la plantilla blank
que trae ionic.
d
ionic start demo111 blank --cordova
Una vez se crea el proyecto, nos dirigimos a la carpeta que ionic crea con su
estructura para comenzar a integrar Google Maps en nuestra aplicación.
d
cd demo111
Para integrar Google Maps Nativo de ionic, necesitaremos hacer uso del plugin de
Google Maps .
Google Maps:
d
ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KE
Y_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE" --save
npm install @ionic-native/google-maps --save
@NgModule({
declarations: [
MyApp,
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
],
providers: [
StatusBar,
SplashScreen,
GoogleMaps,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker
} from '@ionic-native/google-maps';
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(
public navCtrl: NavController,
public geolocation: Geolocation,
) {
...
Para este ejemplo vamos a declarar dos métodos en nuestro archivo home.ts estos se
llamarán:
Es hora de aprender Ionic!. Aprende con nuestro curso. El primer mes es por nuestra
cuenta :)
Me quiero unir.
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker
} from '@ionic-native/google-maps';
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
map: GoogleMap;
constructor(
private navCtrl: NavController,
private googleMaps: GoogleMaps
) {}
ionViewDidLoad(){
this.loadMap();
}
loadMap(){
getPosition(): void{
this.map.getMyLocation()
.then(response => {
this.map.moveCamera({
target: response.latLng
});
this.map.addMarker({
title: 'My Position',
icon: 'blue',
animation: 'DROP',
position: response.latLng
});
})
.catch(error =>{
console.log(error);
});
}
<ion-content>
<div id="map_canvas"></div>
</ion-content>
NOTA: Recuerda activar el acceso a mapas de la aplicación por la con guración del
celular en aplicaciones.
Resultados de la aplicación:
j
Ver código
Recuerda:
Si quieres ejecutar este demo en tu computadora, debes tener el entorno de ionic instalado y
luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego
ejecutar
d
npm install
Te ha gustado el Post? No te olvides dejarnos una Cali cación en Facebook y darle Like al
Facebook Page. Espero sea de utilidad y sigan programando :)
¡Compártelo!
Artículos relacionados:
Background Geolocation
Unete
Inicio
Cursos
Autores
Podcast
Codigo de Conducta
i k r m w