new google.maps.Map(document.getElementById('agmmap'),{}) causes agm map to disappear

Question

Im trying to use google places library with agm map.

html

<agm-map #map id="map" [mapTypeId]="'terrain'" [latitude]="lat" [longitude]="lng" [scrollwheel]="false" style="height: 300px">
  <agm-marker name="latlong" [latitude]="lat" [longitude]="lng" (dragEnd)="markerDragEnd(latitude, longitude, $event)" [markerDraggable]="true">
  </agm-marker>
</agm-map>

ts

@ViewChild(AgmMap, {
  static: true
}) maps: AgmMap;

searchNearbyLocations() {
  var pyrmont = new google.maps.LatLng(this.maps.latitude, this.maps.longitude);
  var request = {
    location: pyrmont,
    radius: this.radius,
    type: this.orgtype
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom: 15
  });
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, this.callback);
}

callback(results, status) {
  console.log(JSON.stringify(results));
}

this piece of code causes my agm map to disappear from view

var map = new google.maps.Map(document.getElementById('map'), {
  center: pyrmont,
  zoom: 15
});

whats happening here ? is newly created map replacing my agm? how to solve this issue?

You must provide a [mcve] that allows to reproduce the issue. Also, the web is full of examples on how to do what you ask for and none of those I found instruct you to initialize a map object the way you did it. — MrUpsidown, Oct 28 '20 at 12:29

score 1 · Answer 1 · edited Jan 09 '22 at 17:33

Probably, because you target the same DOM element (Google set its html). Now, I'm not familiar with Angular but probably you don't need to initiate a new map because you already have one (from AGM).

I found a comment which explains how you can get the map's instance. Based on that:

<agm-map (mapReady)="onMapReady($event)"></agm-map>

public onMapReady(e) {
  this.map = e;
}

So in searchNearbyLocations instead of creating a new map, you can use this.map, like this:

searchNearbyLocations(){
  var pyrmont = new google.maps.LatLng(this.maps.latitude,this.maps.longitude);
  var request = {
    location: pyrmont,
    radius:this.radius,
    type: this.orgtype
    
  };

  var service = new google.maps.places.PlacesService(this.map);
  service.nearbySearch(request, this.callback);
}

new google.maps.Map(document.getElementById('agmmap'),{}) causes agm map to disappear

1 Answers1