title: Google Map API with React.js
body: <p>I am really struggling with this google map api at the moment. What I'm trying to do is on one screen of my application you hit search and it navigates to another where a map is displayed of where all of the speech pathologists are in a given area based on your ip configuration. The search using the api is:<a href="https://maps.googleapis.com/maps/api/place/textsearch/json?query=speech+pathologists&amp;key=" rel="nofollow noreferrer">https://maps.googleapis.com/maps/api/place/textsearch/json?query=speech+pathologists&amp;key=</a>${gkey}.</p>
  
  <p>In react.js how do I actually get this to render? The code I have so far is below. It is incomplete as of every tutorial I found, they are doing something radically different from what I want to do. I just need a map to pop up with this information on it. Any help will do!</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import {
      withGoogleMap,
      withScriptjs,
      GoogleMap,
      Marker,
      InfoWindow
    } from "react-google-maps";
  import {getMap} from '../api/gmap';
  
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8
    });
  }
  
  const WrappedMap = withScriptjs(withGoogleMap(Map));
  
  const MapScreen = ({navigation, route}) =&gt;{
  
      return(
          &lt;div style={{width: '100vw', height: '100vh'}}&gt;
              &lt;WrappedMap 
                  googleMapURL={getMap()}
                  loadingElement={&lt;div style={{ height: `100%`}}/&gt; }
                  containerElement={&lt;div style={{ height: `100%` }} /&gt;}
                  mapElement={&lt;div style={{ height: `100%` }} /&gt;}
              /&gt;
          &lt;/div&gt;
      )
  }
  
  export default MapScreen;
  </code></pre>
  
  <p>gmap.js where my getMap() is found</p>
  
  <pre><code>import axios from 'axios'
  import {gkey} from './gkey';
  
  const gmapServer = axios.create({
      baseURL:'http://maps.googleapis.com/'
  
  })
  
  
  export const getMap = async (item, callback) =&gt; {
      const response = await gmapServer.get(
          `maps/api/place/textsearch/json?query=speech+pathologists&amp;key=${gkey}`
      ); 
      callback(response.data)
  };
  </code></pre>