I am tiring to use google places to grab some restaurant markers but I am not sure how to bine 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);
    }
  });
}

I am tiring to use google places to grab some restaurant markers but I am not sure how to bine 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);
    }
  });
}

• javascript
• reactjs
• google-maps
• google-places-api

• 1 The library you are using doesn't implement the Places Service (only Autoplete and SearchBox apparently). – MrUpsidown Commented Apr 4, 2021 at 18:24
• Any progress on this? – Ricardo Sanchez Commented Jul 27, 2021 at 20:11

1 Answer 1

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 Autoplete and StandaloneSearchBox ponents 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;