Google Map API with React.js

Question

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:https://maps.googleapis.com/maps/api/place/textsearch/json?query=speech+pathologists&key=${gkey}.

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!

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}) =>{

    return(
        <div style={{width: '100vw', height: '100vh'}}>
            <WrappedMap 
                googleMapURL={getMap()}
                loadingElement={<div style={{ height: `100%`}}/> }
                containerElement={<div style={{ height: `100%` }} />}
                mapElement={<div style={{ height: `100%` }} />}
            />
        </div>
    )
}

export default MapScreen;

gmap.js where my getMap() is found

import axios from 'axios'
import {gkey} from './gkey';

const gmapServer = axios.create({
    baseURL:'http://maps.googleapis.com/'

})


export const getMap = async (item, callback) => {
    const response = await gmapServer.get(
        `maps/api/place/textsearch/json?query=speech+pathologists&key=${gkey}`
    ); 
    callback(response.data)
};

Pagemag · Accepted Answer · 2020-06-19 00:55:36Z

1

I have successfully created a reactjs app that shows a map that displayed a marker where all of the speech pathologists are. I used this using Google Maps JavaScript Places Library Text Search Request which implements Places API in the client side and this app does not use any google map libraries. I called the Places Text Search in this app just like how the JavaScript sample in the provided docs.

Here is my sample code. To run this code, you need to change the value of your API key in this part: const API_KEY = "PUT_YOUR_API_KEY_HERE";

Hope this helps in your use case.

answered Jun 19, 2020 at 0:55

Pagemag

2,9991 gold badge11 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Google Map API with React.js

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