title: Retrieving Geolocation of user without index.html
body: <p>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.
  <a href="https://developers.google.com/maps/documentation/javascript/examples/map-geolocation#try-it-yourself" rel="nofollow noreferrer">This is the code I want to implement</a>
   But without having to create a index.html.</p>
  
  <p>How can I add this code to my main.js file without the HTML file? </p>
  
  <blockquote>
    <p>THIS IS HOW I HAVE GOOGLE MAPS SETUP IN MY LANDING PAGE </p>
  </blockquote>
  
  <pre><code>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 (
  
      &lt;Map
      google={this.props.google}
      zoom={3}
      style={mapStyles}
      initialCenter={{
          lat: 28.871812,
          lng: -34.814106
      }}
      &gt;
      &lt;/Map&gt;
  
  );
  }
  }
  
  
  
  
  export default GoogleApiWrapper({
  apiKey: 'API-KEY'
  })(LandingPage);
  </code></pre>
  
  <blockquote>
    <p>THIS IS NAVBAR WITH THE ENTER CODE BUTTON THAT SHOULD REQUEST GEOLOCATION ON CLICK</p>
  </blockquote>
  
  <pre><code>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 = () =&gt; {
      this.setState({ open: true });
  };
  
  handleClose = () =&gt; {
      this.setState({ open: false });
  };
  
  toggleNavbar() {
      this.setState({
      collapsed: !this.state.collapsed
      });
  }
  
  
  render() {
      return (
      &lt;div&gt;
          &lt;Navbar style={{background: '#948E99',  flex: 1,
                          background: '-webkit-linear-gradient(to right, #2E1437, #948E99)',
                              background: 'linear-gradient(to right, #2E1437, #948E99)'}} dark&gt;
              &lt;NavbarToggler color="white" onClick={this.toggleNavbar} className="mr-2" /&gt;
  
              &lt;Button style={{color: 'white'}} href="/" className="mrauto"&gt;DigitalDollar&lt;/Button&gt;
              &lt;Button style={{color: 'white'}} onClick={this.handleClickOpen}  className="mr-auto"&gt;Enter Code&lt;/Button&gt;
  
              &lt;Dialog
              open={this.state.open}
              onClose={this.handleClose}
              aria-labelledby="form-dialog-title"
              &gt;
              &lt;DialogTitle id="form-dialog-title"&gt;Enter Code&lt;/DialogTitle&gt;
  
  
              &lt;DialogContent&gt;
                  &lt;DialogContentText&gt;
                      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.
                  &lt;/DialogContentText&gt;
                  &lt;TextField
                      autoFocus
                      margin="dense"
                      id="Code"
                      label="Enter Code"
                      type="Code"
                      fullWidth
                  /&gt;
              &lt;/DialogContent&gt;
  
  
              &lt;DialogActions&gt;
                  &lt;Button onClick={this.handleClose} color="primary"&gt;
                      Cancel
                  &lt;/Button&gt;
                  &lt;Button onClick={this.handleClose} color="primary"&gt;
                      Subscribe
                  &lt;/Button&gt;
              &lt;/DialogActions&gt;
  
              &lt;/Dialog&gt;
  
              &lt;Collapse isOpen={!this.state.collapsed} navbar&gt;
                  &lt;Nav navbar&gt;
                      &lt;NavItem&gt;
                          &lt;NavLink href="/"&gt;Home&lt;/NavLink&gt;
                      &lt;/NavItem&gt;
                      &lt;NavItem&gt;
                          &lt;NavLink href="/about"&gt;About&lt;/NavLink&gt;
                      &lt;/NavItem&gt;
                      &lt;NavItem&gt;
                          &lt;NavLink href="https://github.com/CH-SYR3" rel="noopener noreferrer" target="_blank"&gt;GitHub&lt;/NavLink&gt;
                      &lt;/NavItem&gt;
                      &lt;NavItem&gt;
                          &lt;NavLink href="https://www.paypal.com/us/home" rel="noopener noreferrer" target="_blank"&gt;Buy Me A Coffee?&lt;/NavLink&gt;
                      &lt;/NavItem&gt;
                  &lt;/Nav&gt;
              &lt;/Collapse&gt;
          &lt;/Navbar&gt;
      &lt;div&gt;
          &lt;Navbar color="light" light expand="md"&gt;
              &lt;Nav className="NavTabs" navbar&gt;
                  &lt;NavItem&gt;
                      &lt;NavLink href="/"&gt;Map&lt;/NavLink&gt;
                  &lt;/NavItem&gt;
                  &lt;NavItem&gt;
                      &lt;NavLink href="/time"&gt;Time&lt;/NavLink&gt;
                  &lt;/NavItem&gt;
                  &lt;NavItem&gt;
                      &lt;NavLink href="/hello"&gt;Hello&lt;/NavLink&gt;
                  &lt;/NavItem&gt;
              &lt;/Nav&gt;
          &lt;/Navbar&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  );
  }
  </code></pre>