google maps not displaying using ionic/angular2

Question

I am using ionic2 for showing google maps. But I am getting blank page when i run the below following code.

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

    );
  }
}

And i include the file in the index.html file,

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

Html file,

<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>

But the following code is working fine,

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

Add width and height to your map DIV:

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

Also this line

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

needs to specify callback function

Answer 2

I think the issue is because you're calling the this.loadNearByOffers(); method in the constructor. That method, tries then to load the map by getting an element from the DOM

document.getElementById("map")

But when your constructor is executed, that element in the DOM does not exist yet, and that's why the map is not loaded properly.

I don't know which version of Ionic are you using in the project, but you can use one of the page events like ionViewDidEnter to be sure that the code will be executed (and the map will be initialized) after the DOM elements are available.

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

You can find a working plunker here.

Answer 3

Try calling method loadNearByOffers() as follows.

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

the map should get loaded on device ready event.