Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/map #20

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Feature/map #20

wants to merge 7 commits into from

Conversation

jayesh100
Copy link
Collaborator

No description provided.

const myLatLng = {lat: -25.363, lng: 131.044};

// Create a map object and specify the DOM element for display.
this.props.googleMap = new google.maps.Map(this.refs.map, {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this._map = ....


updateMap = () => {
const map = this.props.googleMap;
this.props.posts.map((post) => {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use .forEach() instead of .map()

}

updateMap = () => {
const map = this.props.googleMap;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove

this.props.posts.map((post) => {
const { latitude, longitude } = post.location;
const marker = new google.maps.Marker({
map: map,
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

map: this._map


componentDidUpdate(prevProps) {
if (!prevProps.mapsLoaded && this.props.mapsLoaded) this.initMap(this.props.posts);
if (this.props.posts.length > 0) this.updateMap();
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

import { isEqual, property } from 'lodash-es';
// ...
if (!isEqual(this.props.posts.map(property('id')), prevProps.posts.map(property('id'))) this.updateMap();

const map = this.props.googleMap;
this.props.posts.map((post) => {
const { latitude, longitude } = post.location;
const marker = new google.maps.Marker({
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You probably don't want to keep re-adding points. Think about a way to keep track of existing points, or alternatively clear the map, and re-add.


// Create a map object and specify the DOM element for display.
this.props.googleMap = new google.maps.Map(this.refs.map, {
center: myLatLng,
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remember, you already have access to the user's location (this.props.location)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But at this point we don't, it's retrieved afterwards

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then we should probably have some logic to create the map only once the script has loaded, and we have the user's location.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants