Finding Geolocation With HTML / JavaScript

Question

I'm attempting to use TheNewBoston's video to code a site that has a "Get Location" button and will pull up a Google map of the user's location. However, every time I click 'Get Location' on my site, nothing happens. I was playing around with the code and was able to get a map to show up once, but I'm unable to get that result again and have no idea how I got it to work. Not sure what I'm doing wrong?

Here's my code:

<!DOCTYPE html>
<html lang="en-US">

<head>
  <title>Location Retriever</title>
</head>

<body>
  <a href="#" id="get_location">Get Location</a>
  <div> id="map">
    <iframe id="google_map" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com">
  </div>

  <script>

    var c = function(pos) {
      var lat = pos.coords.latitude,
      var long = pos.coords.longitude,
      var coords = lat + ', ' + long; 

      document.getElementById('google_map').setAttribute('src','https://maps.google.com' + coords + '&z=60&output=embed');
    }

    document.getElementById('get_location').onclick = function() {
      navigator.geolocation.getCurrentPosition(c);
      return false;
    }

  </script>

Using chrome web-browser? if so make sure you use `https://` rather than `http://` because google now allowes location only on ssl enabled pages.Better use firefox for this — Vinay, Nov 12 '16 at 03:19
Yes , you can also use older chrome versions anything prior to version 50 would work — Vinay, Nov 12 '16 at 03:26
@Novice - Thank you! I've opened the site on both Firefox and Safari, but I'm still not getting much of a difference, unfortunately. I click 'Get Location' but nothing happens. — hoshicchi, Nov 12 '16 at 03:28
Any error in console? Also check that `return false` i don't think it should be there — Vinay, Nov 12 '16 at 03:33

score 0 · Answer 1 · answered Nov 12 '16 at 03:37

I have made some changes in your code as some tags were not closed/ended and have tweaked the url as well as the url you had given was not working,

<!DOCTYPE html>
<html lang="en-US">

<head>
<title>Location Retriever</title>
</head>

<body>
   <a href="#" id="get_location">Get Location</a>
   <div id="map">
   <iframe id="google_map"
  width="600"
  height="450"
  frameborder="0" style="border:0px" allowfullscreen>
</iframe>
   </div>

<script>

   var c = function(pos) {
   var lat = pos.coords.latitude,
   long = pos.coords.longitude,
   coords = lat + ', ' + long; 

document.getElementById('google_map').setAttribute('src','https://maps.google.com/maps/@' + coords + '&z=60');

}

document.getElementById('get_location').onclick = function() {

navigator.geolocation.getCurrentPosition(c);
return false;

}

</script>
</body>
</html>

If you check in IE :

you will get a "Page not displayed" error in your iframe and there will be a link navigating to a map.

In Google Chrome:

There will be an error in the console stating "Refused to display 'https://www.google.com/maps/@12.9732528,%2080.1971449&z=60' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'."

score 0 · Answer 2 · answered Nov 12 '16 at 03:37

You won't be able to use maps.google.com. The error you get in the console is: Refused to display 'https://www.google.com/maps' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. I think what you might want to look into is https://developers.google.com/maps/documentation/embed/

Also you have some minor code issues, I have fixed what you had:

<!DOCTYPE html>
<html lang="en-US">

<head>
<title>Location Retriever</title>
</head>

<body>
   <a href="#" id="get_location">Get Location</a>
   <div id="map">
   <iframe id="google_map" width="425" height="350" frameborder="0" 
     scrolling="no" marginheight="0" marginwidth="0"
     src="https://maps.google.com"></iframe>
   </div>

   <script>
     var c = function(pos) {
       var lat = pos.coords.latitude,
           long = pos.coords.longitude,
           coords = lat + ', ' + long; 

     document.getElementById('google_map').src = 'https://maps.google.com' + coords + '&z=60&output=embed';

     }

     document.getElementById('get_location').onclick = function() {
       navigator.geolocation.getCurrentPosition(c);
       return false;
     }
   </script>
</body>
</html>

Finding Geolocation With HTML / JavaScript

2 Answers2