Mapy google nie wyświetlające się za pomocą ionic/angleular2

Question

Używam ionic2 do wyświetlania map Google. Ale otrzymuję pustą stronę po uruchomieniu poniższego kodu.

export class NearByStoresPage { 

    constructor(private nav: NavController, private confData: ConferenceData) { 
    this.loadNearByOffers(); 
    } 

    loadNearByOffers(){ 

    let options = {timeout: 10000, enableHighAccuracy: true}; 

    navigator.geolocation.getCurrentPosition(

     (position) => { 
      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);    

      let mapOptions = { 
       center: latLng, 
       zoom: 16, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 

      let map = new google.maps.Map(document.getElementById("map"), mapOptions); 

      let marker = new google.maps.Marker({ 
       map: map, 
       animation: google.maps.Animation.DROP, 
       position: map.getCenter() 
      }); 

      let content = "<h4>Information!</h4>";   

      let infoWindow = new google.maps.InfoWindow({ 
       content: content 
      }); 

      google.maps.event.addListener(marker, 'click', function(){ 
       infoWindow.open(map, marker); 
      }); 
     }, 

     (error) => { 
      console.log(error); 
     }, options 

    ); 
    } 
} 

A ja to plik w pliku index.html,

<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY"></script> 

plik HTML,

<ion-navbar *navbar> 
    <button menuToggle> 
    <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Near By Offers</ion-title> 
</ion-navbar> 

<ion-content class="map-page"> 
    <div id="map"></div> 
</ion-content> 

Ale następujący kod działa poprawnie,

this.confData.getMap().then(mapData => { 
     let mapEle = document.getElementById('map'); 

     let map = new google.maps.Map(mapEle, { 
     center: mapData.find(d => d.center), 
     zoom: 16 
     }); 

     mapData.forEach(markerData => { 
     let infoWindow = new google.maps.InfoWindow({ 
      content: `<h5>${markerData.name}</h5>` 
     }); 

     let marker = new google.maps.Marker({ 
      position: markerData, 
      map: map, 
      title: markerData.name 
     }); 

     marker.addListener('click',() => { 
      infoWindow.open(map, marker); 
     }); 
     }); 

     google.maps.event.addListenerOnce(map, 'idle',() => { 
     mapEle.classList.add('show-map'); 
     }); 

    }); 

Answer 1

Dodaj szerokość i wysokość do swojej mapy DIV:

<div id="map" style="width:800px;height:600px"></div> 

także ta linia

<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY"></script> 

potrzeby określenie funkcji zwrotnej

Answer 2

Myślę, że problemem jest to, ponieważ jesteś wywołanie metody w konstruktorze this.loadNearByOffers();. Że metoda, próbuje następnie załadować mapę dostając element z DOM

document.getElementById("map")

Ale gdy konstruktor jest wykonywany, że elementem w DOM jeszcze nie istnieje, a to dlatego że mapa nie jest załadowana prawidłowo.

Nie wiem, której wersji jonowej używasz w projekcie, ale możesz użyć jednego z page events, takiego jak ionViewDidEnter, aby upewnić się, że kod zostanie wykonany (i mapa zostanie zainicjowana) po DOM elementy są dostępne.

ionViewDidEnter(){ 
    // the html of the page is now available 
    this.loadNearByOffers(); 
} 

Możesz znaleźć działający plunker here.

Answer 3

Spróbuj wywołać metodę loadNearByOffers() w następujący sposób.

ionViewLoaded(){ 
    this.platform.ready().then(() => { 
    this.loadNearByOffers(); 
    } 
} 

mapa powinna zostać załadowana w przypadku zdarzenia urządzenia.