¿Alguien podría decirme qué está mal en mi código cuando cargo el mapa de Google en mi aplicación ionic 2 , el marcador no aparece la primera vez ? Se carga cuando cargo el mapa por segunda vez o después de eso .
cómo el mapa de Google mostrará la ruta entre la ubicación del usuario y la ubicación del marcador .
export class Map implements OnInit { map:GoogleMap; constructor(public navCtrl: NavController, public navParams: NavParams,private googleMaps: GoogleMaps) {} ngOnInit() { this.loadMap()} loadMap() { let location : LatLng = new LatLng(xxxxx,yyyyyy); const markerOptions: MarkerOptions = { position: location, title: 'Dubai' }; this.map = new GoogleMap('map', { 'backgroundColor': 'white', 'controls': { 'compass': true, 'myLocationButton': true, 'indoorPicker': true, 'zoom': true }, 'gestures': { 'scroll': true, 'tilt': true, 'rotate': true, 'zoom': true }, 'camera': { 'latLng': location, 'tilt': 30, 'zoom': 15, 'bearing': 50 }, }); this.map.addMarker(markerOptions).then(data => {data.showInfoWindow();}); this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => console.log('Map is ready!')); } }Consulte mi solución aquí https://github.com/driftyco/ionic-native/issues/1444
Usé mapas nativos de Google de https://ionicframework.com/docs/native/google-maps/
Aquí está el código que usé
import { Component, AfterViewInit } from '@angular/core'; import { NavController } from 'ionic-angular'; import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps'; import { GoogleMapsLatLng } from 'ionic-native'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage implements AfterViewInit { map: GoogleMap; constructor(public navCtrl: NavController) { } // Load map only after view is initialized ngAfterViewInit() { this.loadMap(); } loadMap() { // make sure to create following structure in your view.html file // and add a height (for example 100%) to it, else the map won't be visible // <ion-content> // <div #map id="map" style="height:100%;"></div> // </ion-content> let location = new GoogleMapsLatLng(-34.9290,138.6010); this.map = new GoogleMap('map', { 'backgroundColor': 'white', 'controls': { 'compass': true, 'myLocationButton': true, 'indoorPicker': true, 'zoom': false }, 'gestures': { 'scroll': true, 'tilt': true, 'rotate': true, 'zoom': true }, 'camera': { 'latLng': location, 'tilt': 0, 'zoom': 15, 'bearing': 50 } }); this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => { console.log('Map is ready!'); this.map.addMarker({ 'position': location, 'visible': true, 'title': "nesto", 'markerClick': function(marker) { marker.showInfoWindow(); } }); }); } }