PlacesService creation failing with reference to an agm-map element

When I try to create the PlacesService using a reference to an agm-map element it fails. If I create a map dynamically (new google.maps.Map(somediv)) and use that map for a parameter it succeeds. I've condensed my code as much as I can to show the problem. First my map is declared like so.

 <div style="min-height: 400px;">
  <agm-map [latitude]="lat" [longitude]="lng" [fitBounds]="bounds" [zoom]="zoom">
    <agm-marker *ngIf="repo.state == 2" [(latitude)]="repo.searchLocation.marker.lat"
      [(longitude)]="repo.searchLocation.marker.lng" 
      [markerDraggable]="repo.searchLocation.marker.draggable"
      (dragEnd)='markerDragEnd($event)'></agm-marker>
  </agm-map>
</div>

I get my reference to the map like so:

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

To condense the code I've put my search in the MarkerDragEnd handler.

markerDragEnd(m: any, $event: any) {
    this.repo.searchLocation.marker.lat = m.coords.lat;
    this.repo.searchLocation.marker.lng = m.coords.lng;
    this.findAddressByCoordinates();

    let request = {
        location:  { lat: m.coords.lat, lng: m.coords.lng},
        radius: "25000",
        type: ["rv_park"]
    };

    let service = new google.maps.places.PlacesService(this.map);
    service.nearbySearch(request, (results, status) => {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                var place = results[i];
            }
        }
    });
}

I'm rewriting an app that was previously ASP.NET with razor pages and all of the work was done on the server. I had hoped to move the server work to the client side but this is failing miserably and the errors that I can find appear in the console of the debugger.

I don't know if it is clue but I see this error when the app launches and I'm not sure when it first started. I'm certain I've seen it before but have no clue what is causing it.

sockjs.js:1684 WebSocket connection to 'wss://localhost:5005/sockjs-node/826/5h1gkgu3/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400

The next two errors appear immediately after executing the search code and again I'm clueless as to what causes them I see that they originate out of zone.JS I've tried running the code outside and inside the zone and still get the same errors. the first is this.h.getElementByTagName is not a function.

    core.js:4002 ERROR Error: Uncaught (in promise): TypeError: this.h.getElementsByTagName is not a 
function
TypeError: this.h.getElementsByTagName is not a function
    at u$.attributionText_changed (places_impl.js:74)

The the second exception is the "NearBySearch" isn't a property of "null" after the service creation failed.

As I mentioned at the beginning what does succeed is to create a div with no height and create a second map dynamically and then use that for the PlacesService(fakemap) parameter and it works fine. I've tried several things to get this to work and only have the one html declared map but can't seem to get a correct reference to it.

Solution

Correct, AgmMap is an angular directive, not a google Map object.

What you want to do is the following:

map: GoogleMap;

<div style="min-height: 400px;">
  <agm-map [latitude]="lat" [longitude]="lng" [fitBounds]="bounds" [zoom]="zoom">
    <agm-marker *ngIf="repo.state == 2" [(latitude)]="repo.searchLocation.marker.lat"
      [(longitude)]="repo.searchLocation.marker.lng"
      (mapReady)="map = $event"
      [markerDraggable]="repo.searchLocation.marker.draggable"
      (dragEnd)='markerDragEnd($event)'></agm-marker>
  </agm-map>
</div>

I'd also point out that

there is no latitudeChange event, so latitude cannot be bidirectionally bound.
your markerDragEnd expects two parameters, but you're only sending one