Google map not loading properly

Ionic Framework ionic-v3
1

I want to find the near by place.map loading repeatedly in a time interval. but there is no time interval program like setInterval or setTimeout. i don’t understand what is happening with my code share my code.and sorry for poor english please help me anyone.

import { Component, NgZone, ElementRef, ViewChild } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation';
import { google } from "google-maps";




declare var google : google;
@Component({
  selector: 'page-near-atm',
  templateUrl: 'near-atm.html',
})
export class NearAtmPage {
  @ViewChild('map')
  mapElement: ElementRef;
  markers:any;
  mapOptions:any;
  map:any;
  latLng:any;
  constructor(public navCtrl: NavController, 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);
     
      this.mapOptions = {
        center: this.latLng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }   

      this.map = new google.maps.Map(this.mapElement.nativeElement, this.mapOptions);
       this.nearbyPlace();
    }, (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: 500,
              types: ['atm']
            }, (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);
      });
    });
  }

}

html

<ion-header>
<ion-navbar>
    <ion-title>
    Nearby 
    </ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>

<div #map id="map"></div> 

</ion-content>

how can i fix my issue

3

my map is load properly but itself is being loaded repeatedly.

4

You have loadMap() being called in multiple places / at multiple times.

It’s being called in nearbyPlace() which is in loadMap() itself. This is not an issue with the plugin, but with your code structure.

5

So,please give me some solutions

6

This is my card actually i want to do when user click on this card and when user will enter the page. there should be show nearby place

Capture
Capture.PNG1233×119 2.16 KB