I'm getting two errors, the first:
###Uncaught SyntaxError: Unexpected token <
And the second:
###ReferenceError: google is not defined
When I run it on my computer everything works but at the time of deployment in now.io errors appear in the browser (Google Chrome) after I log in. I guess the problem is when I want to load the map but I'm not sure, the first code is from my login, and the second is the map.
import React, { Component } from 'react';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import axios from 'axios'
import Map from './Map.js';
import { subscribeToTimer } from './api';
import { niPedo } from './api';
import WorkerMainMenu from './Woker_Main_Menu';
class MainMenu extends React.Component {
constructor(props) {
super(props);
this.state =
{
loggedIn: false,
timestamp: 'no timestamp yet',
timestamp2: 'no timestamp 2',
map: true
}
this.loggedInMap = this.loggedInMap.bind(this);
this.loggedInTable = this.loggedInTable.bind(this);
this.notLoggedIn = this.notLoggedIn.bind(this);
this.login = this.login.bind(this);
this.openMap = this.openMap.bind(this);
this.openTable = this.openTable.bind(this);
subscribeToTimer((err, timestamp) => this.setState({
timestamp
}));
niPedo((err, timestamp2) => this.setState({
timestamp2
}));
}
openMap() {
this.setState({ map: true });
}
openTable() {
this.setState({ map: false });
}
login() {
var user = this.refs.inputEmail.value;
var pwd = this.refs.inputPassword.value;
var login = {
user: user,
pwd: pwd
}
axios.post('/api/Login/', { login })
.then(res => {
if (res.status !== 200) {
alert("Intentalo de nuevo");
}
else {
if (res.data.user != null && res.data.user != undefined && res.data.user != "") {
sessionStorage.setItem('loggedUser', JSON.stringify(res.data.user));
var loggedUser = sessionStorage.getItem('loggedUser');
this.setState({ loggedIn: true });
} else {
alert("Intentalo de nuevo");
}
}
}, function (error) {
console.log(error);
});
}
loggedInMap() {
return (
<div className="wrapper">
<nav id="sidebar">
<div className="sidebar-header">
<a href="index.html">
<img className="profile-img-card" src="images/logo.svg" alt="" />
</a>
</div>
<ul className="list-unstyled components">
<li className="success">
<a href="#" onClick={this.openMap} >Home</a>
</li>
<li className="success">
<a href="#" onClick={this.openTable} >Table</a>
</li>
</ul>
</nav>
<div id="content" style={{ width: "100%" }}>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<button type="button" id="sidebarCollapse" className="btn btn-info navbar-btn">
<i className="glyphicon glyphicon-align-justify"></i>
</button>
</div>
</div>
</nav>
<div className="container">
<h1>This is the timer value: {this.state.timestamp}</h1>
<h1>This is the timer value: {this.state.timestamp2}</h1>
<Map />
</div>
</div>
</div>
)
}
loggedInTable() {
return (
<div className="wrapper">
<nav id="sidebar">
<div className="sidebar-header">
<a href="index.html">
<img className="profile-img-card" src="images/logo.svg" alt="" />
</a>
</div>
<ul className="list-unstyled components">
<li className="success">
<a href="#" onClick={this.openMap}>Home</a>
</li>
<li className="success">
<a href="#" onClick={this.openTable}>Table</a>
</li>
</ul>
</nav>
<div id="content" style={{ width: "100%" }}>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<button type="button" id="sidebarCollapse" className="btn btn-info navbar-btn">
<i className="glyphicon glyphicon-align-justify"></i>
</button>
</div>
</div>
</nav>
<div className="container">
<WorkerMainMenu />
</div>
</div>
</div>
)
}
notLoggedIn() {
return (
<center>
<div className="card card-container">
<img className="profile-img-card" src="images/logo.svg" alt="" />
<p id="profile-name" className="profile-name-card"></p>
<form className="form-signin">
<span id="reauth-email" className="reauth-email"></span>
<input type="email" ref="inputEmail" className="form-control" placeholder="Email address" required />
<input type="password" ref="inputPassword" className="form-control" placeholder="Password" required />
<button className="btn btn-lg btn-primary btn-block btn-signin" type="button" onClick={this.login} href="index.html" >Sign in</button>
</form>
<a href="#" className="forgot-password">
Forgot the password?
</a>
</div>
</center>
)
}
render() {
if (this.state.loggedIn && this.state.map) {
return this.loggedInMap();
} else if (this.state.loggedIn && !this.state.map) {
return this.loggedInTable();
} else {
return this.notLoggedIn();
}
}
}
export default MainMenu
And the view that loads later is the following:
import React from "react"
import geolib from "geolib";
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker, Polygon } from "react-google-maps"
const defaultOptions = {
strokeWidth: .5,
stroke: '#FF5106',
strokeOpacity: '0.8',
fill: '#FF4234',
fillOpacity: '.3',
onMouseEnter: function (e) {
},
onMouseLeave: function (e) {
}
};
var coordsTemp = { lat: 1, lng: 1 };
const coords = [
{ lat: 21.152895, lng: -101.717851 },
{ lat: 21.152975, lng: -101.717754 },
{ lat: 21.153160, lng: -101.717934 },
{ lat: 21.153106, lng: -101.717998 },
{ lat: 21.153007, lng: -101.717901 },
{ lat: 21.152961, lng: -101.717955 },
{ lat: 21.152908, lng: -101.717902 },
{ lat: 21.152924, lng: -101.717881 }
];
const coordsGeolib = [
{ latitude: 21.152895, longitude: -101.717851 },
{ latitude: 21.152975, longitude: -101.717754 },
{ latitude: 21.153160, longitude: -101.717934 },
{ latitude: 21.153106, longitude: -101.717998 },
{ latitude: 21.153007, longitude: -101.717901 },
{ latitude: 21.152961, longitude: -101.717955 },
{ latitude: 21.152908, longitude: -101.717902 },
{ latitude: 21.152924, longitude: -101.717881 }
];
const MyMapComponent = compose(
withProps({
googleMapURL: "https:/maps.googleapis.com/maps/api/js?key=[MY API KEY]&libraries=places",
loadingElement: <div style={{ height: '100%' }} />,
containerElement: <div style={{ height: '650px' }} />,
mapElement: <div style={{ height: '100%' }} />,
}),
withScriptjs,
withGoogleMap
)((props) =>
<GoogleMap
defaultZoom={17}
defaultCenter={{ lat: 21.152975, lng: -101.717833 }}
>
<Polygon paths={coords} options={defaultOptions} />
{props.isMarkerShown && <Marker position={{ lat: props.coordsMe.lat, lng: props.coordsMe.lng }} onClick={props.onMarkerClick} label={props.markertext} />}
</GoogleMap>
)
class Map extends React.PureComponent {
state = {
markertext: "Mmmm...",
isMarkerShown: false,
coordsMe: { lat: 21.152348, lng: -101.717292 },
}
componentDidMount() {
this.obtainlocation()
this.delayedShowMarker()
}
obtainlocation() {
navigator.geolocation.getCurrentPosition(position => {
coordsTemp = { lat: position.coords.latitude, lng: position.coords.longitude };
this.setState({ coordsMe: coordsTemp })
})
this.markerInsidePolygon()
}
markerInsidePolygon() {
var isInside = geolib.isPointInside(
{ latitude: this.state.coordsMe.lat, longitude: this.state.coordsMe.lng },
coordsGeolib
) ? 'Sip' : 'Nee'
this.setState({ markertext: isInside })
}
delayedShowMarker = () => {
setTimeout(() => {
this.setState({ isMarkerShown: true })
}, 1000)
}
handleMarkerClick = () => {
this.setState({ isMarkerShown: false })
this.obtainlocation()
this.delayedShowMarker()
}
render() {
return (
<MyMapComponent
isMarkerShown={this.state.isMarkerShown}
onMarkerClick={this.handleMarkerClick}
coordsMe={this.state.coordsMe}
markertext={this.state.markertext}
>
</MyMapComponent>
)
}
}
export default Map;
Thanks in advance:)