gatsby-source-google-places

Source plugin for pulling data from the Google Places API.

Pre-reqs

Get a Google Places API Key.

Install

``shell
npm install --save gatsby-source-google-places


or


yarn add gatsby-source-google-places
`

Using

Setup the plugin

`js
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: gatsby-source-google-places,
options: {
placeIds: ["", ""],
apiKey: "",
language: "en-US", // optional, defaults to en-US
},
},
],
};
`

Query and display a single place

`js
// pages/places.js
import React from "react";
import { graphql } from "gatsby";
import Layout from "../components/layout";

const PlacesPage = ({ data }) => {
const place = data.googlePlacesPlace;
const reviews = place.childrenGooglePlacesReview.map((r) => (


));
return (

{place.name}

total ratings: {place.user_ratings_total}

average: {place.rating}

Recent Reviews

{reviews}

);
};

export const query = graphql
query {
googlePlacesPlace {
name
rating
childrenGooglePlacesReview {
author_name
text
rating
profile_photo_url
}
user_ratings_total
}
}
;

export default PlacesPage;
`

Query and display from multiple places in a page

`js
// pages/multiple-places
import React from "react";
import { graphql } from "gatsby";
import Layout from "../components/layout";

const PlacesPage = ({ data }) => {
const places = data.allGooglePlacesPlace.nodes.map((p) => (


));
return {places};
};

export const query = graphql
query {
allGooglePlacesPlace {
nodes {
name
user_ratings_total
place_id
childrenGooglePlacesReview {
author_name
rating
profile_photo_url
text
}
}
}
}
;

export default PlacesPage;
``

Contribute

Issues, suggestions and PRs welcome!