Geocode an address and set it as Initial Center of Google Map - reactjs

Question

So I'm using google maps API to display a map on my react webpage, I know how to set the initial center point and marker by inputting long and lat, however, now I am trying to geocode a text address using the geocoding API, and push that geocode to the map api to have it load as the initial center point. Any guidance on how to do this is appreciated. Thank you. Below is the code I have for the google maps api so far:
import React, { Component } from "react";
import { Map, GoogleApiWrapper, InfoWindow, Marker } from "google-maps-react";
const mapStyles = {
width: "100%",
height: "30%",
};
export class MapContainer extends Component {
state = {
showingInfoWindow: false, // Hides or shows the InfoWindow
activeMarker: {}, // Shows the active marker upon click
selectedPlace: {}, // Shows the InfoWindow to the selected place upon a marker
};
onMarkerClick = (props, marker, e) =>
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true,
});
onClose = (props) => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null,
});
}
};
render() {
return (
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{
lat: -1.2884,
lng: 36.8233,
}}
>
<Marker
onClick={this.onMarkerClick}
name={"Vendor XYZ's Location"}
/>
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
>
<div>
<h4>{this.state.selectedPlace.name}</h4>
</div>
</InfoWindow>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: "apiKEY GOES HERE",
})(MapContainer);

Answer 1

Since you are using the google-maps-library, you can use the center instead of initialCenter when you intend to change your map's center to the Geocoding result. You can then use state variables to manipulate the changes. As for the Geocoding service, you can call it inside componentDidMount function.
Here's a sample code and code snippet below to achieve this:
/*global google*/
import React, { Component } from 'react';
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';
const mapStyles = {
width: '100%',
height: '30%'
};
export class MapContainer extends Component {
state = {
showingInfoWindow: false, // Hides or shows the InfoWindow
activeMarker: {}, // Shows the active marker upon click
selectedPlace: {},
markerName: "Vendor XYZ's Location",
center: {
lat: -1.2884,
lng: 36.8233
}
};
componentDidMount = () => {
//Geocoding services
const geocoder = new google.maps.Geocoder();
const address = 'New York';
geocoder.geocode({ address: address }, (results, status) => {
if (status === 'OK') {
this.setState({
center: results[0].geometry.location,
markerName: results[0].formatted_address
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
};
onMarkerClick = (props, marker, e) => {
console.log(props);
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
};
onClose = props => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
});
}
};
render() {
return (
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={this.state.center}
center={this.state.center}
>
<Marker
position={this.state.center}
onClick={this.onMarkerClick}
name={this.state.markerName}
/>
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
>
<div>
<h4>{this.state.selectedPlace.name}</h4>
</div>
</InfoWindow>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: "apiKEY GOES HERE"
})(MapContainer);