HTML5 Game - Show your location on google map

  1. HOME
  2. HTML5 Game
  3. Geolocation
  4. Geolocation

Description

Show your location on google map

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <script type = "text/javascript">
  function getLoc(){/*from w ww  .  j av a2s.co  m*/
    navigator.geolocation.getCurrentPosition(showMap);
  }
  function showMap(position){
    let lat = position.coords.latitude;
    let long = position.coords.longitude;
    let linkUrl = "http://maps.google.com?q=" + lat + "," + long;
    let mapLink = document.getElementById("mapLink");
    mapLink.href = linkUrl;
    let embedMap = document.getElementById("embedMap");
    embedMap.src = linkUrl + "&z=16&amp;output=embed";
  }
  </script>
</head>

<body onload = "getLoc()">
  <h1>Geolocation Demo</h1>
  <p>
    <a id = "mapLink"
       href = "http://maps.google.com">click for a map</a>
  </p>

<iframe id = "embedMap"
        width="800" 
        height="500" 
        frameborder="0" 
        scrolling="no" 
        marginheight="0" 
        marginwidth="0" 
        src= "">
</iframe><br />

</body>
</html>

Related Topic