I want to search nearby location using google map

Ionic Framework ionic-v3
#1

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 {}
#2

Try styling the map div, it may be displaying but a very tiny map. Say height :100% and width

#3

Hello, did you able to list out the near by location…??Please let me know.

#5

See: https://jsfiddle.net/api/post/library/pure/

You need to give the map container a width and height, for example:

<ion-content>

  <div #gmap class="gmap-container"></div>

</ion-content>

And:

    .gmap-container {
      width: 100%;
      height: 100%;
    }

Ref:

location
location.png750×1334 235 KB

#6

Hi @robinyo. I too have the same requirement. the js fiddle link given by you is not working. can you please share some code or given reference to this functionality.