here is my whole code
geting the current langituted and latituted .but map is not showing.how can i fix it.
i’m put the map api into the index.html
like that:
<script src="http://maps.google.com/maps/api/js?key=here my api key&libraries=places"></script>
Home.ts
import { Component, NgZone, ElementRef, ViewChild } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation';
//import { googlemaps } from 'googlemaps';
declare var google;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild('map') mapElement: ElementRef;
map:any;
latLng:any;
markers:any;
mapOptions:any;
isKM:any=500;
isType:any="";
constructor(private ngZone: NgZone, private geolocation : Geolocation) { }
ionViewDidLoad() {
this.loadMap();
}
loadMap(){
this.geolocation.getCurrentPosition().then((position) => {
this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
alert(this.latLng);
this.mapOptions = {
center: this.latLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, this.mapOptions);
}, (err) => {
alert('err '+err);
});
}
/*-----------------Find Nearby Place------------------------*/
nearbyPlace(){
this.loadMap();
this.markers = [];
let service = new google.maps.places.PlacesService(this.map);
service.nearbySearch({
location: this.latLng,
radius: this.isKM,
types: [this.isType]
}, (results, status) => {
this.callback(results, status);
});
}
callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
this.createMarker(results[i]);
}
}
}
createMarker(place){
var placeLoc = place;
console.log('placeLoc',placeLoc)
this.markers = new google.maps.Marker({
map: this.map,
position: place.geometry.location
});
let infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(this.markers, 'click', () => {
this.ngZone.run(() => {
infowindow.setContent(place.name);
infowindow.open(this.map, this.markers);
});
});
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic Map
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label>Select Place</ion-label>
<ion-select [(ngModel)]="isType" (ionChange)="nearbyPlace()">
<ion-option value="">Select</ion-option>
<ion-option value="hospital">Hospital</ion-option>
<ion-option value="restaurant">Restaurant</ion-option>
<ion-option value="bank">Bank</ion-option>
<ion-option value="airport">Airport</ion-option>
<ion-option value="library">Library</ion-option>
<ion-option value="gym">Gym</ion-option>
<ion-option value="atm">Atm</ion-option>
<ion-option value="shopping_mall">Shopping Mall</ion-option>
<ion-option value="police">Police Station</ion-option>
<ion-option value="zoo">Zoo</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Select Distance</ion-label>
<ion-select [(ngModel)]="isKM" (ionChange)="nearbyPlace()">
<ion-option value="500">Select</ion-option>
<ion-option value="2000">2 KM</ion-option>
<ion-option value="4000">4 KM</ion-option>
<ion-option value="6000">6 KM</ion-option>
<ion-option value="8000">8 KM</ion-option>
</ion-select>
</ion-item>
hello
<div #map id="map"></div>
</ion-content>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp,
HomePage,
ListPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage
],
providers: [
Geolocation,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}