Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="mainButtons">
    <button onclick="addButton()">Add Contact</button>
    <button onclick="removeButton()">Remove Contact</button>
  </div>
  </br>
  <div id="que"></div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>
 
button {
  height:100px;
  width: 80px;
  text-align: center;
  margin: 5px 4px;
}
#mainButtons button{
  display: inline-block;
  margin: auto;
}
 
var increment = 0;
function addButton(){
  var id = 'btn' + (increment++);
  var que = $("#que");
  var el = $("<button id='"+id+"'>Click for location</button>");
  que.append(el);
  clickHandler(el);
}
​
function removeButton(){
  if (increment >= 0) {
    $("#btn"+(increment-1)).remove();
    increment--;
  }
}
​
function clickHandler(el) {
  el.click(function() {
    getLocation(el);
  });
}
​
function getLocation(el) {
  el.html("Loading....");
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) { showPosition(el, position); });
  } else { 
    el.html("Geolocation is not supported by this browser.");
  }
}
​
function showPosition(el, position) {
  el.html("Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude);
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers