Develop Reference

How to add marker to google map based on data from API react

So I have been trying to implement a google maps instance on my NextJS app, I got most things to work however, I want to display the data I'm fetching from an external source as 'markers' on the map.
For this I have been using the following code but the markers dont seem to show up.
import { Map, InfoWindow, Marker, GoogleApiWrapper, showInfoWindow } from 'google-maps-react';
import React, { Component } from 'react';
export class MapContainer extends Component {
constructor(props) {
super(props);
this.state = {
data: null,
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
};
}
componentDidMount() {
// make fetch request
fetch('api/twitter/search')
.then(response => response.json())
.then(data => this.setState({ data }));
}
onMarkerClick = (props, marker, e) =>
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
onMapClicked = (props) => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
})
}
};
render() {
const { data } = this.state;
console.log(data)
return (
<div>
<Map google={this.props.google}
onClick={this.onMapClicked} width={50} height={50}
center={{
lat: 40.854885,
lng: -88.081807
}}>
{
data?.data.map((st) => (
<>
(
{
st?.place &&
<Marker
title={st?.user.name}
name={'SOMA'}
position={{ lat: 40.854885, lng: -88.081807 }}
key={st?.id} />
}
)
</>
))
}
</Map>
</div>
);
}
}
export default GoogleApiWrapper({
apiKey: ('#')
})(MapContainer)
The map shows up but there are no markers, I would like to display all the items fetched from the API into the Map, I'm not sure if I'm going about the right way by using a javascript map to display a number of markers.

Child component not re-rendering with changes

I have two components that are both children of the same parent component that both render a list of places - a map that loads the places as markers on the map and then a grid of place listings with a filter menu. What I want to do is communicate the filter click from the place listing component to the map component to filter the markers. To accomplish this I have a function in the parent component called handlePlaceFilter() that I am passing into the place listing child component as a prop.
I am able to trigger a console log statement from the parent component after a filter click on the child and can pass up to the parent a filtered list of places - but I can't get it to re-render either component with the filtered list of places.
Here's the parent component containing both children and the handlePlaceFilter() function:
import React from 'react';
import Header from './Header';
import MapContainer from './MapContainer';
import _ from 'lodash';
import Places from './Places';
const Cosmic = require('cosmicjs')();
export default class PlaceIndex extends React.Component {
constructor (props) {
super(props);
this.handlePlaceFilter = this.handlePlaceFilter.bind(this);
this.state = {
destination: '',
destinations: '',
places: '',
globals: '',
}
}
async componentDidMount() {
const bucket = Cosmic.bucket({
slug: 'where-she-goes',
read_key: '',
write_key: ''
});
try {
let result = await bucket.getBucket()
this.setState (() => {
return {
destination: _.find(result.bucket.objects, { slug: this.props.match.params.slug }),
destinations: _.filter(result.bucket.objects, {type_slug: 'destinations'}),
places: _.filter(result.bucket.objects, {type_slug: 'places'}),
globals: _.filter(result.bucket.objects, {type_slug: 'globals'})
}
});
} catch (err) {
console.log(err)
}
}
handlePlaceFilter (places) {
console.log("Place filter clicked!")
console.log(places)
this.setState (() => {
return {
places: places
}
});
}
render() {
if (!this.state.places || !this.state.destination)
return <p>Loading...</p>
// compile list of destination plus children
let placeDestinations = new Array();
placeDestinations.push(this.state.destination.slug);
this.state.destination.metadata.child_destinations &&
this.state.destination.metadata.child_destinations.map(destination => {
placeDestinations.push(destination.slug)
destination.metadata.child_destinations &&
destination.metadata.child_destinations.map(child_destination => {
placeDestinations.push(child_destination.slug)
})
})
console.log("Destination List")
console.log(placeDestinations)
// filter places by destination list
let places = this.state.places.filter(function(place) {
return placeDestinations.includes(place.metadata.destination.slug);
})
console.log("Places")
console.log(places)
let destinationCenter = {
latitude: this.state.destination.metadata.latitude,
longitude: this.state.destination.metadata.longitude
}
return (
<div>
<Header
destinations={this.state.destinations}
globals={this.state.globals}
/>
<div className="places-title text-center">
<h2>All Places in {this.state.destination.title}</h2>
</div>
<MapContainer
places={places}
center={destinationCenter}
/>
<Places
places={places}
handlePlaceFilter={this.handlePlaceFilter}
/>
</div>
);
}
}
Here's the child component for the Place Listings:
import React from 'react'
import _ from 'lodash'
export default class Places extends React.Component {
constructor (props) {
super(props);
this.showHotels = this.showHotels.bind(this);
this.showAll = this.showAll.bind(this);
this.showRestaurants = this.showRestaurants.bind(this);
let places = _.flatMap(this.props.places, this.props.places.metadata);
var allplaces = new Array();
var hotels = new Array();
var restaurants = new Array();
var sights = new Array();
places &&
places.map(place => {
allplaces.push(place)
if (place.metadata.place_type == 'Hotel') {
hotels.push(place)
}
if (place.metadata.place_type == 'Restaurant') {
restaurants.push(place)
}
if (place.metadata.place_type == 'Sight') {
sights.push(place)
}
})
// Limit # of places in each array to customize for page contect
if (this.props.limit) {
(allplaces.length > 0) ? (allplaces.length = this.props.limit) : allplaces;
(hotels.length > 0) ? (hotels.length = this.props.limit) : hotels;
(restaurants.length > 0) ? (restaurants.length = this.props.limit) : restaurants;
(sights.length > 0) ? (sights.length = this.props.limit) : sights;
}
this.state = {
current: "All",
places: allplaces,
hotels: hotels,
restaurants: restaurants,
sights: sights,
allplaces: allplaces
}
}
showAll (e) {
e.preventDefault();
this.props.handlePlaceFilter(this.state.allplaces);
this.setState (() => {
return {
current: "All",
places: this.state.allplaces
}
});
}
showHotels (e) {
e.preventDefault();
this.props.handlePlaceFilter(this.state.hotels);
this.setState (() => {
return {
current: "Hotels",
places: this.state.hotels
}
});
}
showRestaurants (e) {
e.preventDefault();
this.props.handlePlaceFilter(this.state.restaurants);
this.setState (() => {
return {
current: "Restaurants",
places: this.state.restaurants
}
});
}
showSights (e) {
e.preventDefault();
this.props.handlePlaceFilter(this.state.sights);
this.setState (() => {
return {
current: "Sights",
places: this.state.sights
}
});
}
render () {
if (this.state.allplaces.length > 0) {
return (
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="blogFilter text-center text-uppercase">
<ul className="list-inline">
<li>{(this.state.current == "All") ? All : <a href="#" onClick={this.showAll}>All</a>}</li>
<li>{(this.state.hotels.length > 0) ? ((this.state.current == "Hotels") ? <a href="#" className="current" onClick={this.showHotels}>Hotels</a> : <a href="#" onClick={this.showHotels}>Hotels</a>) : <span></span>}</li>
<li>{(this.state.restaurants.length > 0) ? ((this.state.current == "Restaurants") ? <a href="#" className="current" onClick={this.showRestaurants}>Restaurants</a> : <a href="#" onClick={this.showRestaurants}>Restaurants</a>) : <span></span>}</li>
<li>{(this.state.sights.length > 0) ? ((this.state.current == "Sights") ? <a href="#" className="current" onClick={this.showSights}>Sights</a> : <a href="#" onClick={this.showSights}>Sights</a>) : <span></span>}</li>
</ul>
</div>
<div className="row">
<div className="blogContainer">
{
this.state.places &&
this.state.places.map(place => {
console.log("Places")
console.log(place)
return (
<div className="col-sm-3 design">
<article className="portfolio portfolio-2 post-grid">
<div className="post-thumb">
<a href={`/place/${place.slug}`}><img src={place.metadata.hero.imgix_url} alt="" /></a>
<div className="post-thumb-overlay text-center">
<div className="text-uppercase text-center">
<i className="fa fa-link"></i>
</i>
</div>
</div>
</div>
<div className="post-content">
<header className="entry-header text-center text-uppercase">
<h6><a href={`/place/${place.slug}`}>{place.metadata.place_type}</a></h6>
<h2 className="entry-title">{place.title}</h2>
</header>
</div>
</article>
</div>
)
})
}
</div>
</div>
</div>
</div>
</div>
)
} else {
return (
<div></div>
)
}
}
}
And here's the child component for the Map:
import React, { Component } from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
const mapStyles = {
width: '100%',
height: '300px'
};
let geocoder;
export class MapContainer extends Component {
constructor (props) {
super(props);
this.onMarkerClick = this.onMarkerClick.bind(this);
this.displayMarkers = this.displayMarkers.bind(this);
let addresses = new Array();
this.props.places &&
this.props.places.map(place => {
addresses.push(place.metadata.address)
})
this.state = {
lat: this.props.center.latitude,
lng: this.props.center.longitude,
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
places: [],
addresses: addresses
}
}
componentDidMount () {
this.plotPoints()
}
plotPoints () {
let locations = this.getPoints(geocoder)
let places = new Array()
Promise.all(locations)
.then((returnVals) => {
returnVals.forEach((latLng) => {
let place = {
latitude: latLng[0],
longitude: latLng[1]
}
places.push(place)
})
console.log("Places to Plot:")
console.log(places[0].latitude)
// places now populated
this.setState(() => {
return {
lat: places[0].latitude,
lng: places[0].longitude,
places: places
}
});
console.log("Center Lat")
console.log(this.state.lat)
console.log(this.state.lng)
});
}
getPoints(geocoder) {
let locationData = [];
for (let i = 0; i < this.state.addresses.length; i++) {
locationData.push(this.findLatLang(this.state.addresses[i], geocoder))
}
return locationData // array of promises
}
findLatLang(address, geocoder) {
return new Promise(function(resolve, reject) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status === 'OK') {
console.log(results);
resolve([results[0].geometry.location.lat(), results[0].geometry.location.lng()]);
} else {
reject(new Error('Couldnt\'t find the location ' + address));
}
})
})
}
displayMarkers (stores) {
return stores.map((place, index) => {
return <Marker key={index} id={index} position={{
lat: place.latitude,
lng: place.longitude
}}
onClick={() => console.log("You clicked me!")} />
})
}
onMarkerClick (props, marker, e) {
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
};
render() {
geocoder = new this.props.google.maps.Geocoder();
console.log("Place Array")
console.log(this.state.places)
return (
<div className="container place-map">
<div className="row">
<div className="col-md-12">
<Map
google={this.props.google}
zoom={8}
style={mapStyles}
initialCenter={{
lat: this.state.lat,
lng: this.state.lng
}}
>
{this.displayMarkers(this.state.places)}
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
>
<div>Your Location Here!</div>
</InfoWindow>
</Map>
</div>
</div>
</div>
);
}
}
export default GoogleApiWrapper({
apiKey: 'AIzaSyCOJDrZ_DXmHzbzSXv74mULU3aMu3rNrQc'
})(MapContainer);

In your Child component, you are retrieving/setting places value in constructor. After which any change in props of Parent component wont notify to Child component that state value is updated, unless you add getDerivedStateFromProps(props, state).
In this method, you will receive new props and update state from newly received props.
After updating state here (with setState, your child component's render method will execute)

For component to rerender and display the changes the state needs to update. Right now youbare update the state with initial props. When the props changes the state of your child component won't change as you are using only initial props. So what you can do is use a lifecycle hook componentWillReceiveProps and inside that update your state with new props.
Code can be something like this:
componentWillReceiveProps(nextProps){
if(this.state.lat !== nextProps.center.latitude){
this.setState({ lat: nexrProps.center.latitude});
}
}
You can do likewise for rest of the variables too.
This way whenever your props changes your state will also change thus forcing your component to rerender and reflect the changes.
Hope it helps!!

Updating Parent State Dynamically

I am trying to update my parent compenent's state according to child's component input value and render components again.
I have App, Map and ListPlaces components.
Map component shows the map and markers and takes markers from App component as a prop.
ListPlaces component has own state(searchQuery) and a method(updateQuery). Basically it uses regexp and filter the results according to the input and show filtered values in the list element. It's fine, however, I need much more than this. What I want to do here? According to input value changes, I want to update my markers (state in App component) and re-render my map component again to show only related markers on the map. Idea is basic, but I couldn't implement it.
When I try to change my markers which is actually array, it would be 0. I will share my all code but I need to say that I think the problem probably is about onChange method in the input element (ListPlaces)
App.js
class App extends Component {
constructor(props) {
super(props);
this.state = {
places: [],
markers: [],
markerID: -1,
newmarkers: []
};
this.changeMarkers = this.changeMarkers.bind(this);
}
componentDidMount() {
fetch(
"api_url"
)
.then(response => response.json())
.then(data => {
this.setState({
places: data.response.venues,
markers: data.response.venues
});
})
.catch(error => {
console.log("Someting went wrong ", error);
});
}
openInfo = (e, id) => {
this.setState({
markerID: id
});
};
closeInfo = () => {
this.setState({
markerID: -1
});
};
changeMarkers = newValue => {
const newmarkers = this.state.places.filter(
place => place.name === newValue
);
this.setState({
markers: newmarkers
});
};
toggleListPlaces = () => {
const nav = document.getElementById("nav-toggle");
const body = document.getElementsByTagName("body")[0];
nav.classList.toggle("active");
if (body.classList.contains("show-nav")) {
body.classList.remove("show-nav");
} else {
// If sidebar is hidden:
body.classList.add("show-nav");
}
};
render() {
return (
<div className="App">
<Map
role="application"
places={this.state.places}
markers={this.state.markers}
openInfoHandler={this.openInfo}
closeInfoHandler={this.closeInfo}
markerID={this.state.markerID}
googleMapURL="map_url"
loadingElement={<div style={{ height: "100%" }} />}
containerElement={<div style={{ height: "100%" }} />}
mapElement={<div style={{ height: "100%" }} />}
/>
<ListPlaces
toggleListHandler={this.toggleListPlaces}
locations={this.state.places}
openInfoHandler={this.openInfo}
changeMarkersHandler={this.changeMarkers}
/>
</div>
);
}
}
export default App;
ListPlaces
class ListPlaces extends Component {
state = {
searchQuery: ""
};
updateQuery = query => {
this.setState({ searchQuery: query});
};
render() {
const { toggleListHandler, locations, openInfoHandler, changeMarkersHandler} = this.props;
let showLocations;
if (this.state.searchQuery) {
const match = new RegExp(escapeRegExp(this.state.searchQuery), "i");
showLocations = locations.filter(location =>match.test(location.name));
} else {
showLocations = locations;
}
return (
<div>
<aside>
<h2>Restaurants</h2>
<nav>
<div className="search-area">
<input
className="search-input"
type="text"
placeholder="Search Restaurant"
value={this.state.searchQuery}
onChange={e => {this.updateQuery(e.target.value); changeMarkersHandler(e.target.value)}}
/>
</div>
<ul>
{showLocations.map(location => {
return (
<li
key={location.id}
onClick={e =>
openInfoHandler(e, location.id)
}
>
{location.name}
</li>
);
})}
</ul>
</nav>
<p>Information provided by Foursquare</p>
</aside>
<a
onClick={toggleListHandler}
id="nav-toggle"
className="position"
>
<span />
</a>
</div>
);
}
}
export default ListPlaces;
Map
const Map = withScriptjs(withGoogleMap((props) =>
<GoogleMap
defaultZoom={14}
defaultCenter={{ lat: 48.2854790, lng: -143.1407394 }}
>
{props.markers.map(restaurant => {
let marker = (
<Marker
id={restaurant.id}
key={restaurant.id}
name={restaurant.name}
position={{lat: restaurant.location.lat, lng: restaurant.location.lng}}
address={restaurant.location.address}
defaultAnimation={window.google.maps.Animation.DROP} // Should be 1 or 2 according to Stackoverflow
onClick={e => {props.openInfoHandler(e, restaurant.id)}}
animation = {props.markerID === restaurant.id && window.google.maps.Animation.BOUNCE}
>
{props.markerID === restaurant.id && (
<InfoWindow onCloseClick={e => {props.closeInfoHandler()}}>
<div className="info-window">
<p className="restaurant-name">{restaurant.name}</p>
<p className="restaurant-address">{restaurant.location.address}</p>
</div>
</InfoWindow>
)}
</Marker>
);
return marker;
})}
</GoogleMap>
))
export default Map;

you're on the right track - you need to lift up the filter value/filter operation into the common parent
App.js
class App extends React.Component {
onChangeFilter = (newFilter) => {
this.setState({ filter: newFilter })
}
render () {
const { filter, places } = this.state
const mPlaces = places.filter(/* filter places here */)
return (
<div className="App">
<ListPlaces
places={ mPlaces }
onChangeFilter={ this.onChangeFilter }
...
/>
<Map
locations={ mPlaces }
...
/>
</div>
)
}
}
ListPlaces.js
class ListPlaces extends React.Component {
updateQuery = (query) => {
this.props.onChangeFilter(query)
}
...
}
this is a common pattern in React - so common it has its own page in the React docs.

Sharing State Between Components

I want to make two components: App and Map. However when I try to make a new brand Map component and send the data from App to Map component, I cannot.
My App (default) component holds the data as a state. When I try to send this state to the Map component. It holds the data as a prop.
And of course If I don't separate them and write everything in App.js, everything works as I expected (markers shown on the map). But I want to control all states in the parent component.
Am I violating a fundamental React rule? How can I fix that?
App.js
import React, { Component } from "react";
import "./App.css";
import Map from "./Map";
class App extends Component {
constructor(props) {
super(props);
this.state = {
locations: [],
markers: []
};
}
componentDidMount() {
fetch(
"correct_foursquare_api_url"
)
.then(response => response.json())
.then(data =>
data.response.venues.map(place => ({
id: place.id,
name: place.name,
lat: place.location.lat,
lng: place.location.lng
}))
)
.then(locations => {
this.setState({ locations });
});
}
render() {
return (
<div className="App">
<Map locations={this.state.locations} />
</div>
)
}
}
export default App;
Map.js
import React, { Component } from "react";
/* global google */
class Map extends Component {
constructor(props) {
super(props);
this.state = {
locations: [],
markers: []
};
}
componentDidMount() {
this.callMap();
}
callMap() {
window.initMap = this.initMap;
loadJS(
"api_url"
);
}
// Map
initMap = () => {
const { locations, markers } = this.state;
let map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 59.4827293, lng: -83.1405355 },
zoom: 13
});
// Markers
for (var i = 0; i < locations.length; i++) {
var title = locations[i].name;
var position = new google.maps.LatLng(locations[i].lat, locations[i].lng);
var id = locations[i].id;
var marker = new google.maps.Marker({
map: map,
position: position,
title: title,
animation: google.maps.Animation.DROP,
id: id
});
markers.push(marker);
}
};
render() {
return <div id="map" />;
}
}
function loadJS(src) {
var ref = window.document.getElementsByTagName("script")[0];
var script = window.document.createElement("script");
script.src = src;
script.async = true;
ref.parentNode.insertBefore(script, ref);
}
export default Map;

You store your locations in the state of the App component, but you also have locations in state of the Map component that you use on mount.
You could instead wait with rendering the Map component until the locations request is finished, and then use the locations props in the Map component passed down from App instead.
Example
class App extends Component {
constructor(props) {
super(props);
this.state = {
locations: [],
markers: []
};
}
componentDidMount() {
fetch("correct_foursquare_api_url")
.then(response => response.json())
.then(data => {
const locations = data.response.venues.map(place => ({
id: place.id,
name: place.name,
lat: place.location.lat,
lng: place.location.lng
}));
this.setState({ locations });
});
}
render() {
const { locations, markers } = this.state;
if (locations.length === 0) {
return null;
}
return (
<div className="App">
<Map locations={locations} markers={markers} />
</div>
);
}
}
class Map extends Component {
// ...
initMap = () => {
const { locations, markers } = this.props;
// ...
};
// ...
}

create google map with users location with react

I'm new to React and currently trying to learn how to use react-google-maps library. Tried to show a map with users geolocation as the initialCenter of the map.
This is my code:
import React from "react";
import { GoogleApiWrapper, Map } from "google-maps-react";
export class MapContainer extends React.Component {
constructor(props) {
super(props);
this.state = { userLocation: { lat: 32, lng: 32 } };
}
componentWillMount(props) {
this.setState({
userLocation: navigator.geolocation.getCurrentPosition(
this.renderPosition
)
});
}
renderPosition(position) {
return { lat: position.coords.latitude, lng: position.coords.longitude };
}
render() {
return (
<Map
google={this.props.google}
initialCenter={this.state.userLocation}
zoom={10}
/>
);
}
}
export default GoogleApiWrapper({
apiKey: "-----------"
})(MapContainer);
Insted of creating a map with users location I get an initialCenter of my default state values.
How can I fix it? Am I even using the lifecycle function right?
Thank you very much for your help

navigator.geolocation.getCurrentPosition is asynchronous, so you need to use the success callback and set the user location in there.
You could add an additional piece of state named e.g. loading, and only render when the user's geolocation is known.
Example
export class MapContainer extends React.Component {
state = { userLocation: { lat: 32, lng: 32 }, loading: true };
componentDidMount(props) {
navigator.geolocation.getCurrentPosition(
position => {
const { latitude, longitude } = position.coords;
this.setState({
userLocation: { lat: latitude, lng: longitude },
loading: false
});
},
() => {
this.setState({ loading: false });
}
);
}
render() {
const { loading, userLocation } = this.state;
const { google } = this.props;
if (loading) {
return null;
}
return <Map google={google} initialCenter={userLocation} zoom={10} />;
}
}
export default GoogleApiWrapper({
apiKey: "-----------"
})(MapContainer);