Estoy recibiendo dos errores, el primero:
###Uncaught SyntaxError: Unexpected token <
Y el segundo:
###ReferenceError: google is not defined
Cuando lo corro en mi computadora todo funciona pero al momento de hacer el deployment en now.io
los errores aparecen en el navegador (Google Chrome) después de que inicio sesión. Yo supongo que el problema es cuando quiero cargar el mapa pero no estoy muy seguro, el primer codigo es de mi login, y el segundo es el mapa.
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
Y la vista que carga después es la siguiente:
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;
Gracias por adelantado :)