title: Get Current GeoLocation in Javascript
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function showPosition() {
    navigator.geolocation.getCurrentPosition(showMap, error);
  }
  
  function showMap(position) {
    // Get location data
    var mylatlong = position.coords.latitude + "," + position.coords.longitude;
  
    // Set Google map source url
    var mapLink = "https://maps.googleapis.com/maps/api/staticmap?center=" + mylatlong + "&amp;size=50x50";
  
    // Create and insert Google map
    document.getElementById("embedMap").innerHTML = "&lt;img alt='Map Holder' src='" + mapLink + "'&gt;";
  }
  
  function error(err) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="button" value="Add Map" onclick="showPosition()" /&gt;
  
  &lt;div id="embedMap"&gt;
    &lt;!--Google map will be embedded here--&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am new to Javascript and HTML and currently testing out how to get current location and show it in google map after clicking the button. I have tried this but I still cannot get my current location in a map. </p>
  
  <p>app.js</p>
  
  <pre><code>function showPosition() {
               navigator.geolocation.getCurrentPosition(showMap);
           }
  
           function showMap(position) {
               // Get location data
               var latlong = position.coords.latitude + "," + position.coords.longitude;
  
               // Set Google map source url
               var mapLink = "https://maps.googleapis.com/maps/api/staticmap?center="+latlong+"&amp;zoom=16&amp;size=400x300&amp;output=embed";
  
               // Create and insert Google map
               document.getElementById("embedMap").innerHTML = "&lt;img alt='Google map' src='"+ mapLink +"'&gt;";
           }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;input type="button" value="Add Map" onclick="showPosition()"/&gt;
   &lt;div id="embedMap"&gt;
          &lt;!--Google map will be embedded here--&gt;
      &lt;/div&gt;
  </code></pre>