PlacesService creation failing with reference to an agm-map element

Question

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.

Actually the service doesn't require a reference to the map object to be created, just a valid DOM element - const service = new google.maps.places.PlacesService(document.createElement('div')); works just fine :) — Malcolm Swaine, Jun 30 '21 at 09:02

score 1 · Accepted Answer · answered Dec 25 '19 at 19:12

1

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

answered Dec 25 '19 at 19:12

f.khantsis

3,256
5
50
67

Thanks that certainly pointed me in the correct direction. I'm pretty new at this Angular and AgmMap stuff. Just to make sure I did it correctly I adjusted a couple things. – xsoftie Dec 26 '19 at 23:47
1.) I moved the (mapReady) event out of the agm-marker element and put it on the agm-map element. 2.) The bidirectional binding of latitude is on the agm-marker. I'm pretty sure that I read that in the markerDragEnd function and also set that when I want to move the marker via code. Are you saying I shouldn't be able to do that? Or should I go figure out what magic is moving the marker when I think I'm moving it? – xsoftie Dec 26 '19 at 23:55

PlacesService creation failing with reference to an agm-map element

1 Answers1