Script works on jsfiddle but not on my site
<p>The problem is the script on my personal site continues to show "Unable to retrieve your location" If anyone can help it will be much appreciated.
My personal site <a href="http://geolyft.com" rel="nofollow noreferrer">http://geolyft.com</a>
<a href="https://jsfiddle.net/yotzincastrejon/z29esxf3/4/" rel="nofollow noreferrer">https://jsfiddle.net/yotzincastrejon/z29esxf3/4/</a></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;


&lt;p&gt;&lt;button onclick="geoFindMe()"&gt;Show my location&lt;/button&gt;&lt;/p&gt;
&lt;div id="out"&gt;&lt;/div&gt;

&lt;script&gt;
function geoFindMe() {
  var output = document.getElementById("out");

  if (!navigator.geolocation){
    output.innerHTML = "&lt;p&gt;Geolocation is not supported by your browser&lt;/p&gt;";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '&lt;p&gt;Latitude is ' + latitude + '° &lt;br&gt;Longitude is ' + longitude + '°&lt;/p&gt;';

    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&amp;zoom=13&amp;size=300x300&amp;sensor=false";

    output.appendChild(img);
  }

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  }

  output.innerHTML = "&lt;p&gt;Locating…&lt;/p&gt;";

  navigator.geolocation.getCurrentPosition(success, error);
}

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>