Google map not loading properly

@flycoders_sourav wrote:

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

Posts: 1

Participants: 1

Read full topic