How to use Google Map Places API with react?

Question

In my app I've to fetch data from Google Places API and to dispaly markers on the Google Map. Here in this part I've to show the marker and then fetch the location and have to send that to my back end. Can anyone help?

          <input
            type="text"
            id="pac-input"
            className="controls"
            placeholder="Search Box"
            value={this.state.fields["event_location"] || ''}
            onChange={this.onChange.bind(this, "event_location")} />
          <div id="map"></div>
          <p>Unable to locate? <button className="btn btn-default inline" data-toggle="collapse" data-target="#address_panel">Enter an Address</button></p>

Tiago Alves · Accepted Answer · 2017-11-13 05:14:23Z

You can use the method textSearch() to do what you want. For example:

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

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

  var request = {
    location: pyrmont,
    radius: '500',
    query: 'restaurant'
  };

  service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

Google Places API is really good, so take some time to read it.

If you want to use a package that uses React components, I recommend react-google-maps. You should take a look.

Collectives™ on Stack Overflow

How to use Google Map Places API with react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related