MAP Not Loading

@soomit wrote:

Latitude and Longitude is showing in alert but map is not loading. Same code is working fine for other page.

Here is My 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 { google } from "google-maps";
/**
 * Generated class for the NearBankPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

declare var google : google;
@Component({
  selector: 'page-near-bank',
  templateUrl: 'near-bank.html',
})
export class NearBankPage {
  @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);

      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);
       this.nearbyPlace();
       this.addMarkercurrentuserlocation();
    }, (err) => {
      alert('err '+err);
    });

  }
  /*-----------------Find Nearby Place------------------------*/

  nearbyPlace(){
    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,
        icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
    });

    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);
      });
    });
  }
 addMarkercurrentuserlocation(){

   let marker = new google.maps.Marker({
     map: this.map,
     animation: google.maps.Animation.DROP,
     position: this.map.getCenter()
   });

   let content = "<h4>Me</h4>";

   this.addInfoWindow(marker, content);

 }
   addInfoWindow(marker, content){

    let infoWindow = new google.maps.InfoWindow({
      content: content
    });

    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.open(this.map, marker);
    });

  }
}

HTML

  <ion-navbar>
    <ion-title>nearBank</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

<div #map id="map"></div>
</ion-content>

Posts: 1

Participants: 1

Read full topic