Returning Business contact information from Google Places Library in React application

Question

I am trying to return an object of business details, address phone number, and website from Google API. I had used places API only to encounter cors issues as it is a server-side API. The recommendation is to use Places library but there is no reference/examples that I can find that will return what I want.

story would be

• user enters the query string
• application returns a single/list of business contact info based on a text search query
• so that they can be displayed in a directory style listing

Thanks :)

Answer 1

Here is a sample I made that loads the Maps Javascript in React natively so that you can follow Google Map's documentations (i.e. Place Autocomplete + Place Details):

https://stackblitz.com/edit/react-place-autocomplete-64427213

import React, { Component } from "react";
import { render } from "react-dom";
var map;

class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ""
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  onScriptLoad() {
    map = new window.google.maps.Map(
      document.getElementById(this.props.id),
      this.props.options
    );
    this.placeAutocomplete();
  }

  componentDidMount() {
    if (!window.google) {
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.src = `https://maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=places`;
      var x = document.getElementsByTagName("script")[0];
      x.parentNode.insertBefore(s, x);
      // Below is important.
      //We cannot access google.maps until it's finished loading
      s.addEventListener("load", e => {
        this.onScriptLoad();
      });
    } else {
      this.onScriptLoad();
    }
  }
  handleInputChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  placeAutocomplete() {
    var autocomplete = new google.maps.places.Autocomplete(input);
    // // Bind the map's bounds (viewport) property to the autocomplete object,
    // // so that the autocomplete requests use the current map bounds for the
    // // bounds option in the request.
    autocomplete.bindTo("bounds", map);
    // Set the data fields to return when the user selects a place.
    autocomplete.setFields([
      "address_components",
      "geometry",
      "formatted_phone_number",
      "name",
      "website"
    ]);
    autocomplete.addListener("place_changed", function() {
      var place = autocomplete.getPlace();
      if (!place.geometry) {
        // User entered the name of a Place that was not suggested and
        // pressed the Enter key, or the Place Details request failed.
        window.alert("No details available for input: '" + place.name + "'");
        return;
      }
      // If the place has a geometry, then present it on a map.
      var marker = new google.maps.Marker({
        position: place.geometry.location,
        map: map
      });
      map.setCenter(place.geometry.location);
      map.setZoom(12); 
      //add an info window
      var content =
        "name: " +
        place.name +
        "<br />Latitude: " +
        place.geometry.location.lat() +
        "<br />Longitude: " +
        place.geometry.location.lng() +
        "<br />Phone No: " +
        place.formatted_phone_number;

      var infoWindow = new google.maps.InfoWindow({
        content: content
      });
      //add a listner to the marker when clicked to show the info Window
      marker.addListener("click", e => {
        infoWindow.open(map, marker);
      });
    });
  }

  render() {
    return (
      <div>
        <div>
          <h3>Autocomplete search:</h3>
          <input id="input" type="text" placeholder="Enter a location" />
        </div>
        <div className="map" id={this.props.id} />
      </div>
    );
  }
}

export default Map;