How to use places to get nearby points of interest

[dgesteves]

Need to understand which component can I use to get nearby points of interest like 'Restaurants' etc....

[cyrfer]

I'm struggling to use places also. My problem is that after I make a success API call, the map goes blank. I have only tested on an old Windows laptop that has GPU issues, in Chrome and Edge.

Here is how I make the call to places API. I hope it is useful to you, but beware my map goes blank after I use it.

import React, { useCallback, useState } from 'react'
import { Button, Grid, IconButton, TextField, Typography } from '@material-ui/core'
import { Explore, ExploreOff } from '@material-ui/icons'
import Address from './Address'

const Search = ({
  searchLocation,
  onChangeSearchLocation,
  onClickSearch,
  onClickCancel,
}) => {
  return (
<div>
  <Grid container direction="row" justify="flex-start" alignItems="center" wrap="nowrap">
    <TextField
      label="Search Places"
      value={searchLocation}
      onChange={onChangeSearchLocation}
      fullWidth
    />
  </Grid>
  <Grid container direction="row" justify="flex-end" alignItems="center" wrap="nowrap">
    <Button variant="contained" color="primary" onClick={onClickSearch}>SEARCH</Button>
    <Button variant="text" onClick={onClickCancel}>CANCEL</Button>
  </Grid>
</div>
  )
}

const Location = ({
  fields,
  address,
  google,
  refGoogleMap,
  setMapCenter,
}) => {
  const [searchLocation, setSearchLocation] = useState('')
  const [showEditLocation, setShowEditoLocation] = useState(false)
  const mapRef = refGoogleMap.current && refGoogleMap.current.mapRef

  const onClickEditLocation = useCallback(() => {
    setShowEditoLocation(!showEditLocation)
  }, [showEditLocation, setShowEditoLocation])

  const onChangeSearchLocation = useCallback(ev => {
    const place = ev.target.value
    setSearchLocation(place)

  }, [setSearchLocation])

  const onClickSearch = useCallback(() => {
    const service = new google.maps.places.PlacesService(mapRef);

    const request = {
      query: searchLocation, //'Museum of Contemporary Art Australia',
      fields: fields,
    }

    // CALL PLACES API
    service.findPlaceFromQuery(request, function(results, status) {
      const r = results[0].geometry.location
      const c = { lat: r.lat(), lng: r.lng(), }
      setMapCenter(c)
    })

  }, [google, mapRef, fields, searchLocation, setMapCenter])

  return (
  <div>
    <Grid container direction="row" alignItems="center" justify="space-between">
      <Typography variant="body2">Address</Typography>

      <IconButton onClick={onClickEditLocation} color={showEditLocation ? "primary" : "default"}>
        {!showEditLocation ? <ExploreOff /> : <Explore />}
      </IconButton>
    </Grid>

    {
      showEditLocation
      ? <Search {...{searchLocation, onChangeSearchLocation, onClickSearch}} />
      : <Address {...{address}} />
    }
    </div>
  )
}

export default Location

[JustFly1984]

@cyrfer please do not post code in issue. Instead, please create a minimal reproduction in codesandbox.io please keep in mind that for codesandbox.io you do not have to specify your google maps key - it is free.

[cyrfer]

@JustFly1984 I do not understand what you mean "do not have to specify your google maps key - it is free".

I avoided publishing the api key by asking the user to input it. https://codesandbox.io/s/google-maps-places-error-kvirb

[JustFly1984]

You can have empty string as google maps api key for everything you do in code sandbox

[cyrfer]

@JustFly1984 I modified my codesandbox implementation to use an empty string for the api key. A basic map appears with watermarking but that is sufficient to demonstrate my issue after calling the Places API. https://codesandbox.io/s/google-maps-places-issue-kvirb?file=/src/App.js

In my local application, I do not receive an error when calling the Places API. The problem is the map DIV turns white and no map is visible.

Now using codesandbox there is an error when calling the Places API,

You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key