React-google-maps: SearchBox not working after breaking change

[lauffenp]

Where in the 'hierarchy' does Search Box go?

Is it nested inside GoogleMap tag?

I get the following errors:
Uncaught TypeError: Cannot read property 'SearchBox' of undefined
Uncaught TypeError: Cannot read property '_currentElement' of null

I'd be happy to update the example if I could get a little direction.

[bitdivision]

I'm having this issue too.

[bitdivision]

I fixed the console error by adding &libraries=places to the maps script URL.

Unfortunately I've now got a grey map with no obvious console errors :(

[bitdivision]

Actually. my issue was caused by an undefined centre, nothing to do with SearchBox.

It should start working if you include the above library @lauffenp

[lauffenp]

Cool, that does it with the maps scripts URL. I can work on updating the example.

[lauffenp]

I am not able to alter the placeholder prop, however. If I find a solution I will update here.

[luisrudge]

I had this problem too. I had to add the ?libraries=places to the maps script url as well.. Is this documented anywhere?
Maybe we can add a check here and throw a warning/exception with some info on how to fix the issue?

@tomchentw do you want me to PR this?

[lauffenp]

@luisrudge can you change the placeholder prop?

[luisrudge]

@lauffenp yep.. not sure that has anything to do with what I said though..

[lauffenp]

@luisrudge How were you able to do that? Just adding

<SearchBox
...
placeholder = {yourPlaceHolderString}
...
/>

doesn't work for me.

I could update @tomchentw 's example if you could just give me a little more information.

[luisrudge]

this is my component:

<GoogleMapLoader                                                                  
  containerElement={<div style={{height}} /> }                                    
  googleMapElement={                                                              
    <GoogleMap                                                                    
      ref="map"                                                                   
      onZoomChanged={::this.zoomChanged}                                          
      zoom={zoom}                                                                 
      center={googleCenter}                                                       
    >                                                                             
    <SearchBox                                                                    
      controlPosition={google.maps.ControlPosition.TOP_CENTER}                    
      onPlacesChanged={::this.addressChanged}                                     
      ref="searchBox"                                                             
      placeholder="Pick an Address"                                               
      style={styles.searchBox}                                                    
    />                                                                            
    {!isSameLocationAsDefaultCenter(center) && <Marker position={googleCenter} />}
  </GoogleMap>                                                                    
  }                                                                               
/>                                                                                

[lauffenp]

Man, I cannot figure out why this escapes me. In the react console it shows that the placeholder prop is changed, but its not on the screen.

` render () {

return (
   <GoogleMapLoader
    containerElement={
      <div
        style={{
          height: "100%",
        }}


      />
    }
    googleMapElement={
      <GoogleMap
        defaultZoom={3}
        defaultCenter={{lat: -25.363882, lng: 131.044922}}
        placeholder="Customized"
    >
       <SearchBox
      controlPosition={google.maps.ControlPosition.TOP_LEFT}
      ref="searchBox"
    placeholder="Customized your placeholder"
    onPlacesChanged={this.handlePlacesChanged}
    style={inputStyle}
    />
      </GoogleMap>
    }
  />
);

}`

[lauffenp]

Updating your react-google-maps dependency solves this problem.

[Eilt]

ERROR TypeError: Cannot read property 'ControlPosition' of undefined
at MapmainComponent.push../src/app/mapmain/mapmain.component.ts.MapmainComponent.ngOnInit

main map.ts

import { Component, OnInit, NgZone, ViewChild, ElementRef } from '@angular/core';
import { MapsAPILoader } from '@agm/core/services/maps-api-loader/maps-api-loader';
import { AgmMap } from '@agm/core';

@Component({
selector: 'app-mapmain',
templateUrl: './mapmain.component.html',
styleUrls: ['./mapmain.component.css']
})
export class MapmainComponent implements OnInit {

lat: number = 36.6683764;
lng: number = 48.5146292;
zoom = 8;
private agmMap: any;
bounds: google.maps.LatLngBounds;
searchBox: any;
markers: Array;
icon: any;

@ViewChild('search') public searchElement: ElementRef;
places: any;

@ViewChild('agmMap') set content(map: AgmMap) {
if (map) {
map.mapReady.subscribe(map => {
this.agmMap = map;
});
}

}

constructor(private mapsAPILoader: MapsAPILoader,
private NgZone: NgZone, ) {

}
ngOnInit(){

  // this.mapsAPILoader.load().then(() => {

  //     let autocomplete = new google.maps.places.Autocomplete(
  //         this.searchElement.nativeElement, { types: ["address"] });
  //  if(autocomplete!=undefined)
  // autocomplete.addListener('place_changed', () => {
  //   this.NgZone.run(() => {
  //     let place: google.maps.places.PlaceResult = autocomplete.getPlace();
  //     // console.log(place.geometry.location.lat().toString() + place.geometry.location.lng().toString())
  //     this.lat = place.geometry.location.lat();
  //     this.lng = place.geometry.location.lng();
  //     if (place.geometry === undefined || place.geometry === null) {
  //       return;
  //     }
  //   });
  // });

// });
this.places = this.searchElement;
this.bounds = new google.maps.LatLngBounds();
this.searchBox = new google.maps.places.SearchBox(this.searchElement.nativeElement);
this.agmMap.ControlPosition[google.maps.ControlPosition.TOP_LEFT].push(this.searchElement.nativeElement);
this.agmMap.addListener('bounds_changed', () => {
this.searchBox.setBounds(this.agmMap.getBounds());
});
this.searchBox.addListener('places_changed', () => {
var places = this.searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  this.markers.forEach(marker => {
    marker.setMap(null);
  });
  this.markers = [];
  this.bounds = new google.maps.LatLngBounds();
  places.forEach(place => {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
      return;
    }
    this.icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    }
    this.markers.push(new google.maps.Marker({
      map: this.agmMap,
      icon: this.icon,
      title: place.name,
      position: place.geometry.location
    }));
    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      this.bounds.union(place.geometry.viewport);
    } else {
      this.bounds.extend(place.geometry.location);
    }
  });
  this.agmMap.fitBounds(this.bounds);
});

};

}

mainmap.html

MAP

[jainChetan81]

I fixed the console error by adding &libraries=places to the maps script URL.

Unfortunately I've now got a grey map with no obvious console errors :(

that surprisingly worked...

[tsryu]

It worked when I added {libraries: [ 'places']} on bootstrapURLKeys

bootstrapURLKeys={{ key: KEY_GOOGLE_MAP, language: 'en', libraries: ['places'] }}

[JustFly1984]

@tsryu The repo of this project is unmaintained more than 3 years, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api
You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.app

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.app/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api

Our Spectrum community: https://spectrum.chat/react-google-maps
Our Slack channel: https://join.slack.com/t/react-google-maps-api/shared_invite/enQtODc5ODU1NTY5MzQ4LTBiNTYzZmY1YmVjYzJhZThkMGU0YzUwZjJkNGJmYjk4YjQyYjZhMDk2YThlZGEzNDc0M2RhNjBmMWE4ZTJiMjQ

Enjoy!