Closed phil-lauffenburger closed 8 years ago
I'm having this issue too.
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 :(
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
Cool, that does it with the maps scripts URL. I can work on updating the example.
I am not able to alter the placeholder prop, however. If I find a solution I will update here.
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?
@luisrudge can you change the placeholder prop?
@lauffenp yep.. not sure that has anything to do with what I said though..
@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.
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>
}
/>
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>
}
/>
);
}`
Updating your react-google-maps dependency solves this problem.
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
@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
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...
It worked when I added {libraries: [ 'places']}
on bootstrapURLKeys
bootstrapURLKeys={{ key: KEY_GOOGLE_MAP, language: 'en', libraries: ['places'] }}
@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!
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.