Print the latitude and logitude in a modal box

JavaScript
1

I was following https://www.w3schools.com/html/html5_geolocation.asp where they have taught how to print the location of the user on a web page.

I tried to modify the code so that it prints the location of the user in a modal instead of web page. For this

x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;

should be coming in the modal-body.

I am trying this but the locations are not getting printed. Specifically, I am having trouble printing the value of the variable positin.coords.latitude and position.coords.longitude in the modal body.

Any suggestions?

Attached is my code

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
		.btn-info 
		{
			color: #fff;
			background-color: red;
			border-color: #46b8da;
		}
 	 </style>
	
</head>

 
<body>
	<p id="demo"></p>
	<script>
									var x = document.getElementById("sample");
									window.onload function getLocation() 
									{
										if (navigator.geolocation) 
										{
											navigator.geolocation.getCurrentPosition(showPosition);
										} 
										else 
										{ 
        									x.innerHTML = "Geolocation feature is not supported by this browser.";
    									}
									}
									window.onload function showPosition(position)
									{
    									x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
										document.getElementById("sample").innerHTML = "hello";
									}
	</script>
	
	<div class="container">
  		<h2>Modal Example to display the location of the user</h2> <!-- Trigger the modal with a button -->
		<button onclick="getLocation()" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Get Location</button>
  		<!-- Modal components: the header, body and the footer -->
		<div class="modal fade" id="myModal" role="dialog">
			<div class="modal-dialog"> <!-- Modal content-->
      			<div class="modal-content">
        			<div class="modal-header">
          				<button type="button" class="close" data-dismiss="modal">&times;</button> <!-- this is the close button-->
          				<h4 class="modal-title">Your Location is </h4>
        			</div>
        			<div class="modal-body" id="sample">
							<p> 
								This is the body <script> document.getElementById("sample").innerHTML="hello"</script>
							</p>
        			</div>
        			<div class="modal-footer">
          				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <!-- close button  in the footer-->
        			</div>
				</div>
      
			</div>
		</div>
	</div>
	
</body>
</html>
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.