Retrieving Geolocation of user without index.html

Question

Hey I'm making a web application that has to track a user location after button is clicked. I have been using the M.E.R.N stack for this and so far with the tutorials I watched they haven't needed any index.html file just pure JavaScript. I have implement Google maps on my site without using any HTML files. This is the code I want to implement But without having to create a index.html.

How can I add this code to my main.js file without the HTML file?

THIS IS HOW I HAVE GOOGLE MAPS SETUP IN MY LANDING PAGE

import React, { Component } from 'react';
import { Grid, Cell } from 'react-mdl';
import Paper from '@material-ui/core/Paper';
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';

//THIS IS THE LANDING PAGE.
const mapStyles = {
width: '100%',
height: '100%'
};


export class LandingPage extends Component {
render() {
  return (

    <Map
    google={this.props.google}
    zoom={3}
    style={mapStyles}
    initialCenter={{
        lat: 28.871812,
        lng: -34.814106
    }}
    >
    </Map>

);
}
}




export default GoogleApiWrapper({
apiKey: 'API-KEY'
})(LandingPage);

THIS IS NAVBAR WITH THE ENTER CODE BUTTON THAT SHOULD REQUEST GEOLOCATION ON CLICK

importS{} 
//THIS IS THE NAVIGATION BAR PAGE.

export default class NavBar extends React.Component {
    constructor(props) {
    super(props);

    this.toggleNavbar = this.toggleNavbar.bind(this);
    this.state = {
        collapsed: true
    };
}

handleClickOpen = () => {
    this.setState({ open: true });
};

handleClose = () => {
    this.setState({ open: false });
};

toggleNavbar() {
    this.setState({
    collapsed: !this.state.collapsed
    });
}


render() {
    return (
    <div>
        <Navbar style={{background: '#948E99',  flex: 1,
                        background: '-webkit-linear-gradient(to right, #2E1437, #948E99)',
                            background: 'linear-gradient(to right, #2E1437, #948E99)'}} dark>
            <NavbarToggler color="white" onClick={this.toggleNavbar} className="mr-2" />

            <Button style={{color: 'white'}} href="/" className="mrauto">DigitalDollar</Button>
            <Button style={{color: 'white'}} onClick={this.handleClickOpen}  className="mr-auto">Enter Code</Button>

            <Dialog
            open={this.state.open}
            onClose={this.handleClose}
            aria-labelledby="form-dialog-title"
            >
            <DialogTitle id="form-dialog-title">Enter Code</DialogTitle>


            <DialogContent>
                <DialogContentText>
                    Thank you for participating in  the DigitalDollar global run! By entering this code we will 
                    add your location to our map,  please enter your magnificint code here. Thank you for your 
                    participation.
                </DialogContentText>
                <TextField
                    autoFocus
                    margin="dense"
                    id="Code"
                    label="Enter Code"
                    type="Code"
                    fullWidth
                />
            </DialogContent>


            <DialogActions>
                <Button onClick={this.handleClose} color="primary">
                    Cancel
                </Button>
                <Button onClick={this.handleClose} color="primary">
                    Subscribe
                </Button>
            </DialogActions>

            </Dialog>

            <Collapse isOpen={!this.state.collapsed} navbar>
                <Nav navbar>
                    <NavItem>
                        <NavLink href="/">Home</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink href="/about">About</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink href="https://github.com/CH-SYR3" rel="noopener noreferrer" target="_blank">GitHub</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink href="https://www.paypal.com/us/home" rel="noopener noreferrer" target="_blank">Buy Me A Coffee?</NavLink>
                    </NavItem>
                </Nav>
            </Collapse>
        </Navbar>
    <div>
        <Navbar color="light" light expand="md">
            <Nav className="NavTabs" navbar>
                <NavItem>
                    <NavLink href="/">Map</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink href="/time">Time</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink href="/hello">Hello</NavLink>
                </NavItem>
            </Nav>
        </Navbar>
    </div>
    </div>
);
}

stever · Answer 1 · 2019-01-18T20:03:29.607

It's not a file, just an html5 standard that works in browsers. In the link you provide, the navigation language is in the script tag. If you wrap the navigator.geolocation method in a function getUserLoc() that does little more than setState with the coordinates on click, you will be able to update the map's position by setting state. You'd set the initial state in LandingPage's constructor, then pass `getUserLoc() function to your NavBar component where it can be run with this.props.getUserLoc().

 const mapStyles = {
  width: '100%',
  height: '100%'
};
export class LandingPage extends Component {
 constructor(props) {
  super(props)
  this.state={
    lat: 28.871812,
    lng: -34.814106
 }
 this.getUserLoc = this.getUserLoc.bind(this)
 }
getUserLoc() {
 if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(function(position) {
    var pos = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
      };
        this.setState({
         userLat: pos.lat,
         userLng: pos.lng
        })
       });
     } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
   }
   render() {
    return(
      <div>
        <Map
        google={this.props.google}
        zoom={3}
        style={mapStyles}
        initialCenter={{
            lat: this.state.userLat,
            lng: this.state.userLng
        }}
        >
        </Map>
        <NavBar getUserLoc={this.getUserLoc}/>
      </div>
      )
   }
 }

No problem. I edited my answer with more details about the approach. — stever, Jan 18 '19 at 20:04

Retrieving Geolocation of user without index.html

1 Answers1