title: google maps not displaying using ionic/angular2
body: <p>I am using ionic2 for showing google maps. But I am getting blank page when i run the below following code.</p>
  
  <pre><code>export class NearByStoresPage {
  
    constructor(private nav: NavController, private confData: ConferenceData) {
      this.loadNearByOffers();
    }
  
    loadNearByOffers(){
  
      let options = {timeout: 10000, enableHighAccuracy: true};
  
      navigator.geolocation.getCurrentPosition(
  
          (position) =&gt; {
              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 = "&lt;h4&gt;Information!&lt;/h4&gt;";          
  
              let infoWindow = new google.maps.InfoWindow({
                content: content
              });
  
              google.maps.event.addListener(marker, 'click', function(){
                infoWindow.open(map, marker);
              });
          },
  
          (error) =&gt; {
              console.log(error);
          }, options
  
      );
    }
  }
  </code></pre>
  
  <p>And i include the  file in the index.html file,</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key=APIKEY"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Html file,</p>
  
  <pre><code>&lt;ion-navbar *navbar&gt;
    &lt;button menuToggle&gt;
      &lt;ion-icon name="menu"&gt;&lt;/ion-icon&gt;
    &lt;/button&gt;
    &lt;ion-title&gt;Near By Offers&lt;/ion-title&gt;
  &lt;/ion-navbar&gt;
  
  &lt;ion-content class="map-page"&gt;
    &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>But the following code is working fine,</p>
  
  <pre><code>this.confData.getMap().then(mapData =&gt; {
        let mapEle = document.getElementById('map');
  
        let map = new google.maps.Map(mapEle, {
          center: mapData.find(d =&gt; d.center),
          zoom: 16
        });
  
        mapData.forEach(markerData =&gt; {
          let infoWindow = new google.maps.InfoWindow({
            content: `&lt;h5&gt;${markerData.name}&lt;/h5&gt;`
          });
  
          let marker = new google.maps.Marker({
            position: markerData,
            map: map,
            title: markerData.name
          });
  
          marker.addListener('click', () =&gt; {
            infoWindow.open(map, marker);
          });
        });
  
        google.maps.event.addListenerOnce(map, 'idle', () =&gt; {
          mapEle.classList.add('show-map');
        });
  
      });
  </code></pre>