Hi ,
I have implemented Google Maps Java script api in my app. I am finding the current location using Geolocation and displaying the nearby places like banks…etc…The app works fine on browser…but goes not work on the device…I see a blank screen in the app…
Following is the code:
import { Component, ViewChild, ElementRef,OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
declare var google;
@Component({
selector: 'maplocation',
templateUrl: 'maplocation.html'
})
export class MaplocationComponent implements OnInit {
@ViewChild('map') mapElement: ElementRef;
map: any;
latLng : any;
constructor(public navCtrl: NavController,public geolocation: Geolocation) {
console.log("inside MaplocationComponent constructor");
}
ngOnInit() {
console.log("inside MaplocationComponent ngOnInit");
this.loadMap();
}
loadMap() {
this.geolocation.getCurrentPosition().then((position) => {
console.log("inside geolocation");
this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
console.log("latLng created");
let mapOptions = {
center: this.latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
console.log("map created");
var service = new google.maps.places.PlacesService(this.map);
console.log("service created");
var self = this;
service.nearbySearch({
location: this.latLng,
rankBy:google.maps.places.RankBy.DISTANCE,
type: ['bank']
},
function(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
let marker = new google.maps.Marker({
map: self.map,
position: results[i].geometry.location
});
let infoWindow = new google.maps.InfoWindow({
content: results[i].name
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(self.map, marker);
});
}
}
}
);
}, (err) => {
console.log("Geolocation Error: " + err);
});
}
}
I also added the following line in index.html:
<script src="https://maps.googleapis.com/maps/api/js?key=[KEYCODE]&libraries=places&sensor=true"></script>
I searched for the solutions online…but nothing working for me…Please Please help.