Can I use Google Places with react-google-maps/api?

Question

I am tiring to use google places to grab some restaurant markers but I am not sure how to combine it with "@react-google-maps/api".

I saw this post: Google map with react-google-maps API

which seem to pass in "places" to the loader but I am unsure of what to do after that like how do I do something like this

var map;
var service;
var infowindow;

function initMap() {
  var sydney = new google.maps.LatLng(-33.867, 151.195);

  infowindow = new google.maps.InfoWindow();

  map = new google.maps.Map(
      document.getElementById('map'), {center: sydney, zoom: 15});

  var request = {
    query: 'Museum of Contemporary Art Australia',
    fields: ['name', 'geometry'],
  };

  var service = new google.maps.places.PlacesService(map);

  service.findPlaceFromQuery(request, function(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
      map.setCenter(results[0].geometry.location);
    }
  });
}

The library you are using doesn't implement the Places Service (only Autocomplete and SearchBox apparently). — MrUpsidown, Apr 04 '21 at 18:24

score 2 · Answer 1 · answered Apr 05 '21 at 02:10

The code snippet you provided is using Find Place From Query which is one of the services under the Places Library of Google Maps JavaScript API.

The @react-google-maps/api is a library that was created to provide very simple bindings to Google Maps JavaScript API and as the documentation states, it only have Autocomplete and StandaloneSearchBox components for Places Library.

If you would like to use the Find Place From Query, you can implement it by calling the findPlaceFromQuery() method when the map loads. You will see that in my code snippet below, I call it in the onMapLoad() function. I also use state for center and coordsResults that will hold the array for the findPlaceFromQuery result. I will then use a condition to check the coordsResults state before showing the marker for the result. Here is the sample code and code snippet below:

import React from "react";

import { GoogleMap, Marker, InfoWindow } from "@react-google-maps/api";

let coords = [];

class Map extends React.Component {
  state = {
    center: { lat: -33.867, lng: 151.195 },
    coordsResult: []
  };

  onMapLoad = map => {
    let request = {
      query: "Museum of Contemporary Art Australia",
      fields: ["name", "geometry"]
    };

    let service = new google.maps.places.PlacesService(map);

    service.findPlaceFromQuery(request, (results, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          coords.push(results[i]);
        }

        this.setState({
          center: results[0].geometry.location,
          coordsResult: coords
        });
      }
    });
  };

  render() {
    return (
      <div>
        <GoogleMap
          center={this.state.center}
          zoom={13}
          onLoad={map => this.onMapLoad(map)}
          mapContainerStyle={{ height: "400px", width: "800px" }}
        >
          {this.state.coordsResult !== [] &&
            this.state.coordsResult.map(function(results, i) {
              return (
                <Marker key={i} position={results.geometry.location}>
                  <InfoWindow 
                options={{ maxWidth: 300 }}>
                    
                      <span>{results.name}</span>
                    
                  </InfoWindow>
                </Marker>
              );
            })}
        </GoogleMap>
      </div>
    );
  }
}

export default Map;

I'm getting `google is not defined` in the line `let service = new google.maps.places.PlacesService(map);` any ideas? — Ricardo Sanchez, Jul 27 '21 at 15:27

Can I use Google Places with react-google-maps/api?

1 Answers1