# Google Map doesn't load when using Geolocation plugin

**URL:** <https://forum.ionicframework.com/t/google-map-doesnt-load-when-using-geolocation-plugin/105639>\
**Category:** Ionic Native\
**Created:** [September 16, 2017, 10:26am UTC](https://forum.ionicframework.com/t/google-map-doesnt-load-when-using-geolocation-plugin/105639 "2017-09-16T10:26:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hamada123](https://avatars.discourse-cdn.com/v4/letter/h/ba8739/32.png) [@Hamada123](https://forum.ionicframework.com/u/Hamada123)\
**Post date:** [September 16, 2017, 10:26am UTC](https://forum.ionicframework.com/t/google-map-doesnt-load-when-using-geolocation-plugin/105639/1 "2017-09-16T10:26:09Z")

</div>

Hi, sorry I’m quite new to this stuff so go easy on me.

This is my home.ts code:

import { Component } from ‘@angular/core’;  
import { NavController } from ‘ionic-angular’;  
import { Geolocation } from ‘@ionic-native/geolocation’;  
import {  
GoogleMaps,  
GoogleMap,  
GoogleMapsEvent,  
GoogleMapOptions,  
CameraPosition,  
MarkerOptions,  
Marker  
} from ‘@ionic-native/google-maps’;

@Component({  
selector: ‘page-home’,  
templateUrl: ‘home.html’  
})  
export class HomePage {

map: GoogleMap;  
mapElement: HTMLElement;  
autocomplete: any;  
address:any;  
lat: any;  
lon: any;

constructor(public navCtrl: NavController, private googleMaps: GoogleMaps, private geolocation: Geolocation) {  
this.address = {  
place: ‘’  
};

```
    }

```

ionViewDidLoad() {  
setTimeout(()=\>{  
this.loadMap();

```
 }, 100);

```

}

loadMap() {  
this.mapElement = document.getElementById(‘map’);

```
this.geolocation.getCurrentPosition().then((resp) => {
   this.lat= resp.coords.latitude
   this.lon= resp.coords.longitude

  }).catch((error) => {
    console.log('Error getting location', error);
  });

let mapOptions: GoogleMapOptions = {
  camera: {
    target: {
      lat: this.lat,
      lng: this.lon
    },
    zoom: 18,
    tilt: 30
  }
};

this.map = this.googleMaps.create(this.mapElement, 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: this.lat,
          lng: this.lon
        }
      })
      .then(marker => {
        marker.on(GoogleMapsEvent.MARKER_CLICK)
          .subscribe(() => {
            alert('clicked');
          });
      });

  });

```

}  
}

Everything compiles fine but the map doesn’t load on the android emulator. When I hard code latitude and longitude values it works again. Where have i gone wrong?

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [September 16, 2017, 7:03pm UTC](https://forum.ionicframework.com/t/google-map-doesnt-load-when-using-geolocation-plugin/105639/2 "2017-09-16T19:03:13Z")

</div>

Please edit your post, it is not very readable at the moment.  
Use the `</>` button above the input field to format your code, command line output or error message (select the text first, then click the button or wrap it in ````` manually). Check the preview if it looks better. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.