GoogleMaps API IONIC 3

01/03/2018

0

Bom Dia,

Estou estudando IONIC 3 e tentando utilizar a API google maps.
Segui todo o processo de instalação e muitos outros tutoriais da web.
Mas não consigo fazer com que o MAPA apareça na minha tela. Obg.: Não retorna nenhum erro...

map.html
<ion-header>
	<ion-navbar>
		<button ion-button menuToggle>
			<ion-icon name="menu"></ion-icon>
		</button>
		<ion-title>Home</ion-title>
	</ion-navbar>
</ion-header>

<ion-content padding>
	<h3>Ionic GoogleMaps Demo</h3>
	<p>
		This is a demo application of <b>@ionic-native/google-maps</b> plugin.
	</p>
	<div id="map_canvas">
		<button ion-button (click)="onButtonClick($event)">Demo</button>
	</div>
</ion-content>


map.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,
  Platform, ToastController } from 'ionic-angular';

  import {
    GoogleMaps,
    GoogleMap,
    GoogleMapsEvent,
    GoogleMapOptions,
    CameraPosition,
    MarkerOptions,
    Marker,
    MyLocation,
    GoogleMapsAnimation
  } from '@ionic-native/google-maps';

/**
 * Generated class for the MapPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

 @IonicPage()
 @Component({
   selector: 'page-map',
   templateUrl: 'map.html',
 })
 export class MapPage {
   mapReady: boolean = false;
   map: GoogleMap;

   constructor(public navCtrl: NavController, public navParams: NavParams, 
     private googleMaps: GoogleMaps, public platform: Platform, public toastCtrl: ToastController) {
     platform.ready().then(()=>{
       this.loadMap();
     });
   }

   loadMap() {
     let mapOptions: GoogleMapOptions = {
       camera: {
         target: {
           lat: 43.0741904,
           lng: -89.3809802
         },
         zoom: 18,
         tilt: 30
       }
     };

     this.map = this.googleMaps.create('map_canvas', mapOptions);
    
     // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
    .then(() => {
      console.log('Map is ready!');
      // Now you can use all methods safely.
      this.map.addMarker({
        title: 'Ionic',
        icon: 'blue',
        animation: 'DROP',
        position: {
          lat: 43.0741904,
          lng: -89.3809802
        }
      })
      .then(marker => {
        marker.on(GoogleMapsEvent.MARKER_CLICK)
        .subscribe(() => {
          alert('clicked');
        });
      });
    });
  }

  onButtonClick() {
    if (!this.mapReady) {
      this.showToast('map is not ready yet. Please try again.');
      return;
    }
    this.map.clear();

    // Get the location of you
    this.map.getMyLocation()
    .then((location: MyLocation) => {
      console.log(JSON.stringify(location, null ,2));

        // Move the map camera to the location with animation
        return this.map.animateCamera({
          target: location.latLng,
          zoom: 17,
          tilt: 30
        }).then(() => {
          // add a marker
          return this.map.addMarker({
            title: '@ionic-native/google-maps plugin!',
            snippet: 'This plugin is awesome!',
            position: location.latLng,
            animation: GoogleMapsAnimation.BOUNCE
          });
        })
      }).then((marker: Marker) => {
        // show the infoWindow
        marker.showInfoWindow();

        // If clicked it, display the alert
        marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
          this.showToast('clicked!');
        });
      });
    }

    showToast(message: string) {
      let toast = this.toastCtrl.create({
        message: message,
        duration: 2000,
        position: 'middle'
      });

      toast.present(toast);
    }



  }


map.scss

page-map {
#map_canvas {
height: 90%;
}
}
Renan Nascimento

Renan Nascimento

Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar