We Keep Coding

How to add images to React through an API call and not importing the image?

I'm trying to use data that has an image url as part of an object. Normally, you would assign import the image and assign it to a variable. However, I am unable to do that as I'm planning on using an API call to get this image urls. Currently I'm using mock data and have been unable to successfully render the image. I want to add an image to the <InfoWindow> component.
I've tried:
<img src={selectedSite.image} alt={`alien ${selectedSite.eventType}`} />
<img src={require(`${selectedSite.image}`} alt={`alien ${selectedSite.eventType}`} />
Mock Data
export const mockSightings = [
{
name: '',
lat: '47.7511',
lng: '-120.7401',
description: 'BIG BLUE BALL IN SKY OMG',
eventType: 'sighting',
image: 'https://cdn.mos.cms.futurecdn.net/QkuLCPzH7GUVS9MthdWM9M.jpg',
},
{
name: 'Billy Bob',
lat: '43.8041',
lng: '-120.5542',
description: 'BIG RED BALL IN SKY OMG',
eventType: 'sighting',
image: 'https://ewscripps.brightspotcdn.com/dims4/default/3402aa2/2147483647/strip/true/crop/1000x563+0+0/resize/1280x720!/quality/90/?url=http%3A%2F%2Fewscripps-brightspot.s3.amazonaws.com%2F5a%2F57%2F58a3662b422a8fb6464451f244eb%2Flarge-fireball-seen-across-fl-sky-mari-g.png',
},
{
name: 'Stephanie Jo',
lat: '44.0682',
lng: '-114.7420',
description: 'rotating lights',
eventType: 'sighting',
image: 'https://i.dailymail.co.uk/i/pix/2016/10/04/01/391305FA00000578-3820675-image-a-23_1475542666609.jpg',
}
]
Component
import React, { useState } from "react";
import {
GoogleMap,
useJsApiLoader,
Marker,
InfoWindow,
} from "#react-google-maps/api";
import { mockSightings } from "../../mockdata";
const containerStyle = {
width: "1500px",
height: "800px",
};
const center = {
lat: 39.8283,
lng: -98.5795,
};
const SightingsMap = () => {
const [selectedCenter, setSelectedCenter] = useState(null);
const [selectedSite, setSelectedSite] = useState(null);
const { isLoaded } = useJsApiLoader({
id: "google-map-script",
googleMapsApiKey: `${process.env.REACT_APP_API_KEY}`,
});
const generateMarkers = () => {
return mockSightings.map((sighting) => {
const position = {
lat: parseInt(sighting.lat),
lng: parseInt(sighting.lng),
};
return (
<Marker
position={position}
onMouseDown={() => {
setSelectedSite(sighting);
}}
onMouseUp={() => {
setSelectedCenter(position);
}}
/>
);
});
};
return isLoaded ? (
<GoogleMap mapContainerStyle={containerStyle} center={center} zoom={5}>
{generateMarkers()}
{selectedCenter && (
<InfoWindow
onCloseClick={() => {
setSelectedCenter(null);
}}
position={selectedCenter}
>
<div>
<div>
<p>{selectedSite.name ? selectedSite.name : "anonymous"}</p>
<p>{selectedSite.description}</p>
<p>{selectedSite.eventType}</p>
</div>
<img src={selectedSite.image} alt={`alien ${selectedSite.eventType}`} />
</div>
</InfoWindow>
)}
</GoogleMap>
) : (
<></>
);
};
export default SightingsMap;

Try
<img src={`${selectedSite.image}`}/>

#react-google-maps/api "google is not defined " error when accessed inside UseEffect hook

what im trying to do
place a marker on the map and calculate the distance between the marker and a static location on the map.
if the distance is greater than 1000 metres then i display address not available modal
problem description
Unable to access google inside UseEffect .
I loaded the script properly and followed the documentation
window.google is available in the onMapClick function but not anywhere in my index component or inside the useEffect hook
How do i access it ? Everything else works fine
Unhandled Runtime Error
ReferenceError: google is not defined
import React, { useRef, useState, useEffect, useCallback } from 'react';
import {
GoogleMap,
useLoadScript,
Marker,
InfoWindow,
MarkerClusterer,
} from '#react-google-maps/api';
import '#reach/combobox/styles.css';
import usePlacesAutoComplete, {
getGeocode,
getLatLng,
} from 'use-places-autocomplete';
import getDistanceFromLatLonInKm from '../../utils/getDistanceFromLatLonInKm.js';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import { Circle } from '#react-google-maps/api';
const libraries = ['places', 'geometry'];
const mapContainerStyle = {
width: '100%',
height: '40vh',
};
const center = {
lat: 25.33800452203996,
lng: 55.393221974372864,
};
const options = {
zoomControl: true,
};
const circleOptions = {
strokeColor: '#00a3a6',
strokeOpacity: 0.4,
strokeWeight: 2,
fillColor: '#00a3a6',
fillOpacity: 0.1,
clickable: false,
draggable: false,
editable: false,
visible: true,
radius: 1050,
zIndex: 1,
};
const initialMarker = { lat: null, long: null };
export default function index() {
const { isLoaded, loadError } = useLoadScript({
googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
libraries,
});
const [marker, setMarker] = useState(initialMarker);
const [showModal, setShowModal] = useState(false);
const handleModalClose = () => {
setShowModal(false);
setMarker(initialMarker);
};
const onMapClick = (event) => {
setMarker({
lat: event.latLng.lat(),
lng: event.latLng.lng(),
});
console.log(window.google); //accessible here
};
const renderMap = () => {
return (
<GoogleMap
mapContainerStyle={mapContainerStyle}
zoom={14}
options={options}
center={center}
onClick={onMapClick}>
<Circle center={center} options={circleOptions} />
{marker && <Marker position={{ lat: marker.lat, lng: marker.lng }} />}
</GoogleMap>
);
};
useEffect(() => {
if (
//cant access google here
google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(center.lat, center.lng),
new google.maps.LatLng(marker.lat, marker.lng)
) > 1000
) {
setShowModal(true);
}
}, [marker.lat]);
if (loadError) return 'Error Loading Maps';
if (!isLoaded) return 'Loading Maps';
return (
<>
<div>{renderMap()}</div>
<Modal
show={showModal}
onHide={handleModalClose}
backdrop="static"
keyboard={false}
centered>
<Modal.Header closeButton>
<Modal.Title>Address is out of bounds</Modal.Title>
</Modal.Header>
<Modal.Body>Sorry ! We Dont Deliver Food In Your Area .</Modal.Body>
<Modal.Footer>
<Button onClick={handleModalClose}>Choose New Address</Button>
</Modal.Footer>
</Modal>
</>
);
}

Turn on the internet connection in your computer...it will definitely work

ReactJS Using setState() for an array of objects

I am having trouble using setStates. I stored an array of markers for my Google Map in my state and I am using a for loop to iterate through each marker in order to change the position state of the marker using Google's Geocode API.
Here is my state:
state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
markers: [
{
name: "Costco Wholesale",
address: "9151 Bridgeport Rd, Richmond, BC V6X 3L9",
position: { lat: 0, lng: 0 },
placeID: 'ChIJWc2NzuF0hlQRDu0NNhdQCjM'
} //just trying to get this one to work first before I add in the others
],
busy: []
};
Here is the function(declared inside the class):
findLatLong(){
for(let i = 0; i < this.state.markers.length; i++){
Geocode.fromAddress(this.state.markers[i].address).then(
response => {
const { lati, lngi } = response.results[0].geometry.location;
this.state.markers[i].position.setState({lat: lati, lng: lngi})
}
);
}
}
As you can see, I am passing the address contained in the same array element into the .fromAddress function and then using setState to set the lat and lng to the returned value.
I later call the function after the map renders but before the markers do:
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{ lat: 49.166590, lng: -123.133569 }}
>
{this.findLatLong}
{this.state.markers.map((marker, index) => (
<Marker
key={index}
onClick={this.onMarkerClick}
name={marker.name}
position={marker.position}
/>
))}
However marker's position state is not changing and is instead remaining as the filler values I passed during the initial state declaration.
Full code if it helps:
import React, { Component } from 'react';
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';
import Geocode from 'react-geocode';
const key = '';
Geocode.setApiKey(key);
const mapStyles = {
width: '100%',
height: '100%'
};
export class MapContainer extends Component {
state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
markers: [
{
name: "Costco Wholesale",
address: "9151 Bridgeport Rd, Richmond, BC V6X 3L9",
position: { lat: 0, lng: 0 },
placeID: 'ChIJWc2NzuF0hlQRDu0NNhdQCjM'
}
],
busy: []
};
findLatLong(){
for(let i = 0; i < this.state.markers.length; i++){
Geocode.fromAddress(this.state.markers[i].address).then(
response => {
const { lati, lngi } = response.results[0].geometry.location;
this.state.markers[i].position.setState({lat: lati, lng: lngi})
}
);
}
}
componentDidMount() {
this.getList();
}
getList = () => {
fetch('/api/getList')
.then(res => res.json())
.then(percent => this.setState({ busy: percent }))
}
onMarkerClick = (props, marker, e) =>
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
onClose = props => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
});
}
};
render() {
return (
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{ lat: 49.166590, lng: -123.133569 }}
>
{this.findLatLong}
{this.state.markers.map((marker, index) => (
<Marker
key={index}
onClick={this.onMarkerClick}
name={marker.name}
position={marker.position}
/>
))}
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
>
<div>
<h4>{this.state.selectedPlace.name}</h4>
<h4>{this.state.busy}</h4>
</div>
</InfoWindow>
</Map>
);
}
}
Thank you in advance!
Attempt to fix #1
.then(
response => {
const { lati, lngi } = response.results[0].geometry.location;
this.setState(oldState => {
const newMarkers = [oldState.markers];
const modifiedMarker = newMarkers[i];
modifiedMarker.lat = lati;
modifiedMarker.lng = lngi;
return {oldState, markers: [newMarkers]};
//How do i implement the modifiedMarkers?
})

UPDATE
Actually it is better if you mutate the state just once and not inside the loop
findLatLong(){
const newMarkers = [...this.state.markers]
for(let i = 0; i < this.state.markers.length; i++){
Geocode.fromAddress(this.state.markers[i].address).then(
response => {
const { lati, lngi } = response.results[0].geometry.location;
newMarkers[i].position.lat = lati;
newMarkers[i].position.lng = lngi;
}
);
}
this.setState(oldState => {
return { ...oldState, markers: [...newMakers] };
});
}
That's no how you mutate the state, it should be something like this:
this.setState(oldState => {
const newMakers = [...oldState.makers];
const modifiedElement = newMakers[i];
modifiedElement.lat = lati;
modifiedElement.lng = lngi;
return { ...oldState, makers: [...newMakers] };
});

Info Window not showing on marker click in react-google-maps

I'm trying to get the info window of the specific markers to open when the marker is clicked. The map and markers are all appearing correctly and when I hover over a marker it shows the correct title however when I click a marker nothing happens. It's definitely recognizing that the marker was clicked as it logs
the message in the console but it just doesn't show the info window. Any help would be greatly appreciated as I've been trying to solve this problem all day.
Thanks
Map.js
import React, { Component } from "react";
import { Map, GoogleApiWrapper, Marker, InfoWindow } from "google-maps-react";
import axios from "axios";
import shortid from "shortid";
class MyMapComponent extends Component {
constructor(props) {
super(props);
this.state = {
fields: [],
location: {
lat: 51.5074,
lng: 0.1278,
},
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
taxis: [
{
companyName: "",
address1: "",
address2: "",
town: "",
postcode: "",
phoneNumber: "",
email: "",
coords: {
lat: "",
lng: "",
},
distance: "",
},
],
};
}
async componentDidMount() {
const { lat, lng } = await this.getcurrentLocation();
this.setState((prev) => ({
fields: {
...prev.fields,
location: {
lat,
lng,
},
},
currentLocation: {
lat,
lng,
},
}));
}
getcurrentLocation() {
this.getNearbyTaxis();
if (navigator && navigator.geolocation) {
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition((pos) => {
const coords = pos.coords;
resolve({
lat: 51.5074,
lng: 0.1278,
/*
lat: coords.latitude,
lng: coords.longitude,
*/
});
console.log(coords.latitude, coords.longitude);
this.setState({
location: {
lat: 51.5074,
lng: 0.1278,
},
});
});
});
}
return {
lat: 0,
lng: 0,
};
}
addMarker = (location, map) => {
this.setState((prev) => ({
fields: {
...prev.fields,
location,
},
}));
map.panTo(location);
};
getNearbyTaxis = () => {
axios
.get(
`https://api.tfl.gov.uk/Cabwise/search?lat=${this.state.location.lat}&lon=${this.state.location.lng}`
)
.then((res) => {
res.data.Operators.OperatorList.map((taxi) => {
this.setState({
taxis: this.state.taxis.concat({
companyName: taxi.TradingName,
address1: taxi.AddressLine1,
address2: taxi.AddressLine2,
town: taxi.Town,
postcode: taxi.Postcode,
phoneNumber: taxi.BookingsPhoneNumber,
email: taxi.BookingsEmail,
coords: {
lat: taxi.Latitude,
lng: taxi.Longitude,
},
distance: taxi.Distance,
}),
});
});
})
.then(console.log(this.state.taxis));
};
handleToggle = () => {
console.log("marker clicked");
this.setState({
isOpen: true,
});
console.log(this.state.isOpen);
};
render() {
return (
<>
<button onClick={this.getNearbyTaxis}>Get Taxis</button>
<Map
google={this.props.google}
style={{
width: "100%",
height: "100%",
}}
initialCenter={this.state.fields.location}
center={this.state.fields.location}
zoom={14}
//onClick={this.onMapClicked}
key={shortid.generate()}
>
{this.state.taxis.length &&
this.state.taxis.map((taxi) => {
return (
<Marker
title={taxi.companyName}
name={taxi.companyName}
position={taxi.coords}
onClick={this.handleToggle} // marker ID is the key here.
key={shortid.generate()}
>
<InfoWindow
key={shortid.generate()}
visible={this.state.isOpen}
onCloseClick={this.handleToggle}
>
<div key={shortid.generate()}>
<h1 key={shortid.generate()}> hji </h1>
</div>
</InfoWindow>
</Marker>
);
})}
<Marker position={this.state.fields.location} />
</Map>
</>
);
}
}
export default GoogleApiWrapper({
apiKey: "MY_API_KEY",
})(MyMapComponent);
TaxiList.js
import React, { useState } from "react";
import { Map, GoogleApiWrapper, InfoWindow, Marker } from "google-maps-react";
import MyMapComponent from "./Map";
function TaxiList(props) {
return (
<div>
<MyMapComponent />
</div>
);
}
export default TaxiList;

In the class constructor the initial assignment of this.state = {} is missing property isOpen.
Since you pass that boolean to InfoWindow, is the component's visible prop supposed to do what you think it does? If yes, then the code should kind of work now. If no, you might want to change your code.
Aditionally, every Marker will use the same variable, which means that every related InfoWindow will show up. To solve this you might want to make use of activeMarker you have lying around there in the initial assignment of this.state = {}.
Edit: The InfoWindow won't show because it's nested. Either change Marker component, or move it outside. Documentation here: https://reactjs.org/docs/render-props.html

React js delete point from the path update the Polygon

I have the following map, as you should on the map I have a polygon and markers which are the main points of the polygon, below I have the main points of the polygon printed, i.e. the markers.
I give the user the possibility to delete points of the polygon, as you can see below in the image by clicking on the X, the point is eliminated.
The problem is this, when I click on the X, the point is eliminated as a marker, but it seems to remain as a fixed point of the polygon, which it really shouldn't do, the polygon should change its shape, based on the eliminated point.
I am not able to understand where I am wrong.
Can you give me some help.
Link: codesandbox
Index:
import React from "react";
import ReactDOM from "react-dom";
import Map from "./Map";
import "./styles.css";
//import { makeStyles } from "#material-ui/core/styles";
import ExpansionPanel from "#material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "#material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "#material-ui/core/ExpansionPanelDetails";
import Typography from "#material-ui/core/Typography";
import ExpandMoreIcon from "#material-ui/icons/ExpandMore";
import ClearIcon from "#material-ui/icons/Clear";
import TextField from "#material-ui/core/TextField";
const API_KEY = "MY_API_KEY";
/*const useStyles = makeStyles(theme => ({
root: {
width: "100%"
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular
}
}));*/
const useStyles = theme => ({
root: {
width: "100%"
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular
}
});
const center = {
lat: 38.9065495,
lng: -77.0518192
};
//const classes = useStyles();
//className={classes.heading}
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
paths: [
{ lat: 38.97330905858943, lng: -77.10469090410157 },
{ lat: 38.9209748864926, lng: -76.9083102888672 },
{ lat: 38.82689001319151, lng: -76.92204319902345 },
{ lat: 38.82261046915962, lng: -77.0181735701172 },
{ lat: 38.90174038629909, lng: -77.14314305253907 }
]
};
}
render() {
const { paths } = this.state;
return (
<div className="App2">
<Map
apiKey={API_KEY}
center={center}
paths={paths}
point={paths => this.setState({ paths })}
/>
{paths.map((pos, key) => {
return (
<ExpansionPanel key={key}>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<ClearIcon
style={{ color: "#dc004e" }}
onClick={() => {
paths.splice(key, 1);
console.log(paths);
this.setState({ paths: paths });
}}
/>
<Typography>Point #{key}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<TextField
fullWidth
key={"lat" + key}
label="Latitude"
type="text"
value={pos.lat}
disabled={true}
/>
<TextField
fullWidth
key={"lng" + key}
label="Longitude"
type="text"
value={pos.lng}
disabled={true}
/>
</ExpansionPanelDetails>
</ExpansionPanel>
);
})}
</div>
);
}
}
//export default withStyles(useStyles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Map:
import React, { useState, useRef, useCallback } from "react";
import {
LoadScript,
GoogleMap,
DrawingManager,
Polygon,
Marker
} from "#react-google-maps/api";
import "./styles.css";
const libraries = ["drawing"];
const options = {
drawingControl: true,
drawingControlOptions: {
drawingModes: ["polygon"]
},
polygonOptions: {
fillColor: `#2196F3`,
strokeColor: `#2196F3`,
fillOpacity: 0.5,
strokeWeight: 2,
clickable: true,
editable: true,
draggable: true,
zIndex: 1
}
};
class LoadScriptOnlyIfNeeded extends LoadScript {
componentDidMount() {
const cleaningUp = true;
const isBrowser = typeof document !== "undefined"; // require('#react-google-maps/api/src/utils/isbrowser')
const isAlreadyLoaded =
window.google &&
window.google.maps &&
document.querySelector("body.first-hit-completed"); // AJAX page loading system is adding this class the first time the app is loaded
if (!isAlreadyLoaded && isBrowser) {
// #ts-ignore
if (window.google && !cleaningUp) {
console.error("google api is already presented");
return;
}
this.isCleaningUp().then(this.injectScript);
}
if (isAlreadyLoaded) {
this.setState({ loaded: true });
}
}
}
export default function Map({ apiKey, center, paths = [], point }) {
const [path, setPath] = useState(paths);
const [state, setState] = useState({
drawingMode: "polygon"
});
const noDraw = () => {
setState(function set(prevState) {
return Object.assign({}, prevState, {
drawingMode: "maker"
});
});
};
const onPolygonComplete = React.useCallback(
function onPolygonComplete(poly) {
const polyArray = poly.getPath().getArray();
let paths = [];
polyArray.forEach(function(path) {
paths.push({ lat: path.lat(), lng: path.lng() });
});
setPath(paths);
console.log("onPolygonComplete", paths);
point(paths);
noDraw();
poly.setMap(null);
},
[point]
);
/*const onLoad = React.useCallback(function onLoad(map) {
//console.log(map);
}, []);
const onDrawingManagerLoad = React.useCallback(function onDrawingManagerLoad(
drawingManager
) {
// console.log(drawingManager);
},
[]);*/
// Define refs for Polygon instance and listeners
const polygonRef = useRef(null);
const listenersRef = useRef([]);
// Call setPath with new edited path
const onEdit = useCallback(() => {
if (polygonRef.current) {
const nextPath = polygonRef.current
.getPath()
.getArray()
.map(latLng => {
return { lat: latLng.lat(), lng: latLng.lng() };
});
setPath(nextPath);
point(nextPath);
}
}, [setPath, point]);
// Bind refs to current Polygon and listeners
const onLoad = useCallback(
polygon => {
polygonRef.current = polygon;
const path = polygon.getPath();
listenersRef.current.push(
path.addListener("set_at", onEdit),
path.addListener("insert_at", onEdit),
path.addListener("remove_at", onEdit)
);
},
[onEdit]
);
// Clean up refs
const onUnmount = useCallback(() => {
listenersRef.current.forEach(lis => lis.remove());
polygonRef.current = null;
}, []);
console.log(path);
return (
<div className="App">
<LoadScriptOnlyIfNeeded
id="script-loader"
googleMapsApiKey={apiKey}
libraries={libraries}
language="it"
region="us"
>
<GoogleMap
mapContainerClassName="App-map"
center={center}
zoom={10}
version="weekly"
//onLoad={onLoad}
>
{path.length === 0 ? (
<DrawingManager
drawingMode={state.drawingMode}
options={options}
onPolygonComplete={onPolygonComplete}
//onLoad={onDrawingManagerLoad}
editable
draggable
// Event used when manipulating and adding points
onMouseUp={onEdit}
// Event used when dragging the whole Polygon
onDragEnd={onEdit}
/>
) : (
<Polygon
options={{
fillColor: `#2196F3`,
strokeColor: `#2196F3`,
fillOpacity: 0.5,
strokeWeight: 2
}}
// Make the Polygon editable / draggable
editable
draggable
path={path}
// Event used when manipulating and adding points
onMouseUp={onEdit}
// Event used when dragging the whole Polygon
onDragEnd={onEdit}
onLoad={onLoad}
onUnmount={onUnmount}
/>
)}
{path.map((pos, key) => {
return <Marker key={key} label={"" + key} position={pos} />;
})}
</GoogleMap>
</LoadScriptOnlyIfNeeded>
</div>
);
}

Add useEffect to Map component to update paths for each render
export default function Map({ apiKey, center, paths = [], point }) {
const [path, setPath] = useState();
const [state, setState] = useState({
drawingMode: "polygon"
});
useEffect(() => {
setPath(paths);
}, [paths]);
.
.
.
and use filter instead of splice
In React you should never mutate the state directly.
onClick={() => {
this.setState({
paths: this.state.paths.filter((_, i) => i !== key)
});
or use splice like below
onClick={() => {
const paths = this.state.paths;
this.setState({
paths: [...paths.slice(0,key), ...paths.slice(key+1)]})
}}
codesandbox

During the Cancel Event, Call the function with the index of that array in the function parameter .
removetheArray = value => {
const { paths } = this.state;
this.setState({
paths: paths.splice(value, 1)
});
};
Function name is the removetheArray and pass the index as the value, the array as removed and map is updated incase map is not updated you have to init the map.