googleMapsSOS.md

Tripedia

• The high level goal of this project is to allow a user to pick a origin and a destination for a road trip anywhere in the US, utilizing React. Once the user has entered the data they will see their route displayed on a google map, from there a series of different attractions will be displayed on the map as pins. The user will be able to hover a pin and see information associated to that specific attraction. There will be an option for the user to add a specific pin to their trip and they should see their route alter on the google map.

Tools and links

• google-map-react
• google map API

Where we are

• We are successfully rendering the the google map on our page via this code:

const displayRoute = (map, maps) => {
    console.log('HIT')
    let start = { lat: 39.751774, lng: -104.996809 };
    let end = { lat: 39.773563, lng: -105.039513 };

    let request = {
      origin: start,
      destination: end,
      waypoints: allWaypoints,
      travelMode: "DRIVING"
    };
    let directionsRenderer = new maps.DirectionsRenderer({
      path: { start, end },
      draggable: true,
      suppressMarkers: true
    });

    let directionsService = new maps.DirectionsService();
    directionsService.route(request, function(result, status) {
      if (status === "OK") {
        directionsRenderer.setDirections(result);
      }
    });
    directionsRenderer.setMap(map);
  };


  return (
    <div style={{ height: "80vh", width: "100%" }}>
      <GoogleMapReact
      //API KEY//
        defaultCenter={center}
        defaultZoom={zoom}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({ map, maps }) => displayRoute(map, maps)}
        >
        <Pin
          lat={39.773563}
          lng={-105.039513}
          text={"David's House"}
          type="school"
          />
        <Pin
          lat={39.751774}
          lng={-104.996809}
          text={"Turing School"}
          type="school"
          />
        {createPin()}
      </GoogleMapReact>
    </div>
  );
};

• We have hover state on the pins with a button that is adding a waypoint to the request through React Hooks and it is updating in our state via this code:

  const [allWaypoints, createNewWaypoint] = useState([])
  const addWaypt = value => {
    const coordinates = value.split(',')
    createNewWaypoint([...allWaypoints, { location: { lat: parseFloat(coordinates[0]), lng: parseFloat(coordinates[1]) }, stopover: true }])
  };

The Problem

• We seem to be rerendering our pins on the click of the 'add trip' button, but the map as a whole is not rendering. We found this out by throwing console.logs and only got a 'HIT' in the function that renders our pins. We are thinking that there might be an issue with the wrapper/map as a whole not recognizing the change in state, other than that its a wash as far as we are concerned.

Thank you in advance for your time,

The Tripedia Team