fork(1) download
copy 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Get User Location</title>
  8.     <link href="https://c...content-available-to-author-only...r.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  9. </head>
  10.  
  11. <body class="bg-gray-100">
  12.     <div class="container mx-auto p-4">
  13.         <h1 class="text-3xl font-semibold mb-4">Get User Location Automatically</h1>
  14.         <div id="loading" class="text-blue-500">Fetching location...</div>
  15.         <div id="location" class="mt-4 text-lg"></div>
  16.     </div>
  17.  
  18.     <script>
  19.         // عند تحميل الصفحة، طلب إذن الموقع تلقائيًا
  20.         window.onload = function () {
  21.             if (navigator.geolocation) {
  22.                 navigator.geolocation.getCurrentPosition(function (position) {
  23.                     const latitude = position.coords.latitude;
  24.                     const longitude = position.coords.longitude;
  25.  
  26.                     // عرض الإحداثيات
  27.                     document.getElementById('loading').style.display = 'none';
  28.                     document.getElementById('location').innerText = `Latitude: ${latitude}, Longitude: ${longitude}`;
  29.  
  30.                     // إرسال الموقع إلى الخادم باستخدام Fetch API
  31.                     fetch('save_location.php', {
  32.                         method: 'POST',
  33.                         headers: {
  34.                             'Content-Type': 'application/json',
  35.                         },
  36.                         body: JSON.stringify({ latitude, longitude })
  37.                     })
  38.                     .then(response => response.json())
  39.                     .then(data => {
  40.                         console.log('Location saved:', data);
  41.                     })
  42.                     .catch(error => {
  43.                         console.error('Error saving location:', error);
  44.                     });
  45.                 }, function (error) {
  46.                     document.getElementById('loading').style.display = 'none';
  47.                     let message = '';
  48.                     switch (error.code) {
  49.                         case error.PERMISSION_DENIED:
  50.                             message = 'User denied the request for Geolocation.';
  51.                             break;
  52.                         case error.POSITION_UNAVAILABLE:
  53.                             message = 'Location information is unavailable.';
  54.                             break;
  55.                         case error.TIMEOUT:
  56.                             message = 'The request to get user location timed out.';
  57.                             break;
  58.                         default:
  59.                             message = 'An unknown error occurred.';
  60.                     }
  61.                     document.getElementById('location').innerText = message;
  62.                 });
  63.             } else {
  64.                 document.getElementById('loading').style.display = 'none';
  65.                 document.getElementById('location').innerText = 'Geolocation is not supported by this browser.';
  66.             }
  67.         };
  68.     </script>
  69. </body>
  70.  
  71. </html>
  72.  
Success #stdin #stdout 0.03s 25880KB
comments (?)
stdin
copy 
H
stdout
copy 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get User Location</title>
    <link href="https://c...content-available-to-author-only...r.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>

<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <h1 class="text-3xl font-semibold mb-4">Get User Location Automatically</h1>
        <div id="loading" class="text-blue-500">Fetching location...</div>
        <div id="location" class="mt-4 text-lg"></div>
    </div>

    <script>
        // عند تحميل الصفحة، طلب إذن الموقع تلقائيًا
        window.onload = function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    const latitude = position.coords.latitude;
                    const longitude = position.coords.longitude;

                    // عرض الإحداثيات
                    document.getElementById('loading').style.display = 'none';
                    document.getElementById('location').innerText = `Latitude: ${latitude}, Longitude: ${longitude}`;

                    // إرسال الموقع إلى الخادم باستخدام Fetch API
                    fetch('save_location.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ latitude, longitude })
                    })
                    .then(response => response.json())
                    .then(data => {
                        console.log('Location saved:', data);
                    })
                    .catch(error => {
                        console.error('Error saving location:', error);
                    });
                }, function (error) {
                    document.getElementById('loading').style.display = 'none';
                    let message = '';
                    switch (error.code) {
                        case error.PERMISSION_DENIED:
                            message = 'User denied the request for Geolocation.';
                            break;
                        case error.POSITION_UNAVAILABLE:
                            message = 'Location information is unavailable.';
                            break;
                        case error.TIMEOUT:
                            message = 'The request to get user location timed out.';
                            break;
                        default:
                            message = 'An unknown error occurred.';
                    }
                    document.getElementById('location').innerText = message;
                });
            } else {
                document.getElementById('loading').style.display = 'none';
                document.getElementById('location').innerText = 'Geolocation is not supported by this browser.';
            }
        };
    </script>
</body>

</html>
https://ideone.com/oA7E4j
Gg
language:
PHP (php 7.3.5)
created:
340 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!