{"id":826,"date":"2025-10-30T15:16:18","date_gmt":"2025-10-30T15:16:18","guid":{"rendered":"https:\/\/tipsbyanita.in\/?page_id=826"},"modified":"2025-10-30T15:16:23","modified_gmt":"2025-10-30T15:16:23","slug":"get-weather-details-by-location","status":"publish","type":"page","link":"https:\/\/tipsbyanita.in\/hi\/get-weather-details-by-location\/","title":{"rendered":"Get Weather Details by location"},"content":{"rendered":"<style>\n  .weather-widget {\n    --primary-color: #0b5ed7;\n    --primary-hover: #0a58ca;\n    --text-color: #1f2937;\n    --text-light: #475569;\n    --text-muted: #6b7280;\n    --bg-color: #f3f6fb;\n    --card-bg: #ffffff;\n    --border-color: #d1d5db;\n    --success-color: #10b981;\n    --error-color: #ef4444;\n    --warning-color: #f59e0b;\n    --shadow: 0 6px 18px rgba(15,23,42,0.06);\n    --radius: 8px;\n    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, \"Poppins\", sans-serif;\n    background: var(--bg-color);\n    color: var(--text-color);\n    padding: 20px;\n    text-align: center;\n    line-height: 1.6;\n    max-width: 100%;\n  }\n  \n  .weather-widget * {\n    box-sizing: border-box;\n  }\n  \n  .weather-widget h1 {\n    color: var(--primary-color);\n    margin-bottom: 8px;\n    font-size: 1.5rem;\n  }\n  \n  .weather-widget .lead {\n    color: var(--text-light);\n    margin-top: 0;\n    margin-bottom: 20px;\n    font-size: 0.95rem;\n  }\n  \n  .weather-widget .search-container {\n    margin-bottom: 20px;\n    background: var(--card-bg);\n    padding: 15px;\n    border-radius: var(--radius);\n    box-shadow: var(--shadow);\n  }\n  \n  .weather-widget .input-group {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    justify-content: center;\n    margin-bottom: 12px;\n  }\n  \n  .weather-widget input[type=\"text\"] {\n    flex: 1;\n    min-width: 200px;\n    padding: 10px 12px;\n    border-radius: var(--radius);\n    border: 1px solid var(--border-color);\n    font-size: 0.9rem;\n    transition: all 0.2s;\n  }\n  \n  .weather-widget input[type=\"text\"]:focus {\n    outline: none;\n    border-color: var(--primary-color);\n    box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.1);\n  }\n  \n  .weather-widget .btn {\n    padding: 10px 14px;\n    border-radius: var(--radius);\n    border: none;\n    background: var(--primary-color);\n    color: #fff;\n    cursor: pointer;\n    font-size: 0.9rem;\n    font-weight: 500;\n    transition: all 0.2s;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n  }\n  \n  .weather-widget .btn:hover {\n    background: var(--primary-hover);\n    transform: translateY(-1px);\n  }\n  \n  .weather-widget .btn:active {\n    transform: translateY(0);\n  }\n  \n  .weather-widget .btn-locate {\n    background: var(--success-color);\n  }\n  \n  .weather-widget .btn-locate:hover {\n    background: #0da271;\n  }\n  \n  .weather-widget #result {\n    margin-top: 20px;\n    display: none;\n    text-align: left;\n    background: var(--card-bg);\n    padding: 15px;\n    border-radius: var(--radius);\n    box-shadow: var(--shadow);\n    animation: fadeIn 0.3s ease-in-out;\n  }\n  \n  .weather-widget .weather-card {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n  \n  @media (min-width: 500px) {\n    .weather-widget .weather-card {\n      grid-template-columns: 1fr 1fr;\n    }\n  }\n  \n  .weather-widget .weather-info {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n  \n  .weather-widget .weather-main {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 10px;\n  }\n  \n  .weather-widget .temperature {\n    font-size: 2rem;\n    font-weight: 700;\n    color: var(--primary-color);\n    line-height: 1;\n  }\n  \n  .weather-widget .weather-details {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 6px;\n    margin-top: 10px;\n  }\n  \n  .weather-widget .weather-detail {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 0.85rem;\n  }\n  \n  .weather-widget .map-container {\n    height: 180px;\n    border-radius: var(--radius);\n    overflow: hidden;\n  }\n  \n  .weather-widget iframe.map {\n    border: 0;\n    width: 100%;\n    height: 100%;\n  }\n  \n  .weather-widget .meta {\n    color: var(--text-muted);\n    font-size: 0.8rem;\n    margin-top: 15px;\n  }\n  \n  .weather-widget .small {\n    font-size: 0.8rem;\n    color: var(--text-muted);\n  }\n  \n  .weather-widget .loading {\n    display: inline-block;\n    width: 18px;\n    height: 18px;\n    border: 2px solid rgba(255, 255, 255, 0.3);\n    border-radius: 50%;\n    border-top-color: #fff;\n    animation: spin 1s ease-in-out infinite;\n  }\n  \n  @keyframes spin {\n    to { transform: rotate(360deg); }\n  }\n  \n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n  \n  .weather-widget .error {\n    color: var(--error-color);\n  }\n  \n  .weather-widget .success {\n    color: var(--success-color);\n  }\n  \n  .weather-widget .location-icon {\n    width: 16px;\n    height: 16px;\n  }\n<\/style>\n\n<div class=\"weather-widget\">\n  <h1>Instant Weather Finder<\/h1>\n  <p class=\"lead\">Enter any location name or use your current location to get instant weather information.<\/p>\n  \n  <div class=\"search-container\">\n    <div class=\"input-group\">\n      <input id=\"place\" type=\"text\" placeholder=\"Enter place name \u2014 e.g. Lucknow, Gomti Nagar\" aria-label=\"Enter place name\" \/>\n      <button id=\"btnSearch\" class=\"btn\">Get Weather<\/button>\n      <button id=\"btnLocate\" class=\"btn btn-locate\" title=\"Use browser GPS\">\n        <svg class=\"location-icon\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z\" fill=\"white\"\/>\n        <\/svg>\n        Use my location\n      <\/button>\n    <\/div>\n    <p class=\"small\">Try: Delhi, Mumbai, Kolkata, Chennai, or any city worldwide<\/p>\n  <\/div>\n\n  <div id=\"result\" role=\"region\" aria-live=\"polite\"><\/div>\n  \n\n<script>\n  (function() {\n    const resultDiv = document.getElementById('result');\n    const placeInput = document.getElementById('place');\n    const btnSearch = document.getElementById('btnSearch');\n    const btnLocate = document.getElementById('btnLocate');\n\n    \/\/ Allow search with Enter key\n    placeInput.addEventListener('keypress', (e) => {\n      if (e.key === 'Enter') {\n        performSearch();\n      }\n    });\n\n    btnSearch.addEventListener('click', performSearch);\n\n    function performSearch() {\n      const place = placeInput.value.trim();\n      if (!place) { \n        showMessage('Please enter a place name (e.g. Lucknow)', 'error');\n        return; \n      }\n      lookupPlaceAndShowWeather(place);\n    }\n\n    btnLocate.addEventListener('click', () => {\n      if (!navigator.geolocation) {\n        showMessage('Geolocation is not supported by your browser.', 'error');\n        return;\n      }\n      \n      showLoading('Detecting your location...');\n      \n      navigator.geolocation.getCurrentPosition(\n        async (pos) => {\n          const lat = pos.coords.latitude;\n          const lon = pos.coords.longitude;\n          \n          \/\/ Get place name from coordinates\n          const placeName = await reverseGeocodeName(lat, lon);\n          fetchWeatherAndShow(lat, lon, placeName || 'Your location');\n        }, \n        (err) => {\n          let errorMsg = 'Unable to retrieve your location. ';\n          switch(err.code) {\n            case err.PERMISSION_DENIED:\n              errorMsg += 'Location access was denied.';\n              break;\n            case err.POSITION_UNAVAILABLE:\n              errorMsg += 'Location information is unavailable.';\n              break;\n            case err.TIMEOUT:\n              errorMsg += 'Location request timed out.';\n              break;\n            default:\n              errorMsg += 'An unknown error occurred.';\n          }\n          showMessage(errorMsg, 'error');\n        }, \n        {\n          timeout: 15000,\n          enableHighAccuracy: true\n        }\n      );\n    });\n\n    async function lookupPlaceAndShowWeather(place) {\n      showLoading(`Searching for \"${escapeHtml(place)}\" ...`);\n      \n      try {\n        const geoRes = await fetch('https:\/\/nominatim.openstreetmap.org\/search?format=json&limit=1&q=' + encodeURIComponent(place), {\n          headers: { 'Accept': 'application\/json' }\n        });\n        \n        if (!geoRes.ok) {\n          throw new Error('Network response was not ok');\n        }\n        \n        const geoData = await geoRes.json();\n        if (!geoData || geoData.length === 0) {\n          showMessage('No results found. Try a different name (city, area, or full address).', 'error');\n          return;\n        }\n        \n        const loc = geoData[0];\n        const lat = parseFloat(loc.lat);\n        const lon = parseFloat(loc.lon);\n        const displayName = loc.display_name || place;\n        \n        fetchWeatherAndShow(lat, lon, displayName);\n      } catch (e) {\n        console.error(e);\n        showMessage('Error looking up place. Please try again.', 'error');\n      }\n    }\n\n    async function reverseGeocodeName(lat, lon) {\n      try {\n        const res = await fetch('https:\/\/nominatim.openstreetmap.org\/reverse?format=json&lat=' + lat + '&lon=' + lon + '&zoom=10&addressdetails=0');\n        if (!res.ok) {\n          throw new Error('Reverse geocoding failed');\n        }\n        const data = await res.json();\n        return data && data.display_name ? data.display_name : null;\n      } catch (e) { \n        console.error('Reverse geocoding error:', e);\n        return null; \n      }\n    }\n\n    async function fetchWeatherAndShow(lat, lon, placeName) {\n      showLoading(`Fetching weather for ${escapeHtml(placeName)} (${lat.toFixed(4)}, ${lon.toFixed(4)}) ...`);\n      \n      try {\n        const weatherRes = await fetch(`https:\/\/api.open-meteo.com\/v1\/forecast?latitude=${lat}&longitude=${lon}&current_weather=true`);\n        \n        if (!weatherRes.ok) {\n          throw new Error('Weather API response was not ok');\n        }\n        \n        const weather = await weatherRes.json();\n\n        if (!weather || !weather.current_weather) {\n          showMessage('Weather data not available for this location.', 'error');\n          return;\n        }\n\n        const w = weather.current_weather;\n        \n        \/\/ Get local time\n        const localTime = new Date().toLocaleString();\n        \n        \/\/ Build weather card\n        resultDiv.innerHTML = `\n          <div class=\"weather-card\">\n            <div class=\"weather-info\">\n              <h2 style=\"margin:0 0 6px 0\">${escapeHtml(placeName)}<\/h2>\n              <div class=\"small\">Coordinates: ${lat.toFixed(4)}, ${lon.toFixed(4)}<\/div>\n              <div class=\"small\">Local time: ${localTime}<\/div>\n              \n              <div class=\"weather-main\">\n                <div class=\"temperature\">${w.temperature}\u00b0C<\/div>\n                <div>\n                  <div style=\"font-weight: 500;\">Current Temperature<\/div>\n                  <div class=\"small\">Feels like ${Math.round(w.temperature)}\u00b0C<\/div>\n                <\/div>\n              <\/div>\n              \n              <div class=\"weather-details\">\n                <div class=\"weather-detail\">\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M13 3V11H21V3H13ZM3 21H11V13H3V21ZM3 3V11H11V3H3ZM13 16H16V13H18V16H21V18H18V21H16V18H13V16Z\" fill=\"#6b7280\"\/>\n                  <\/svg>\n                  Wind: ${w.windspeed} km\/h\n                <\/div>\n                <div class=\"weather-detail\">\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z\" fill=\"#6b7280\"\/>\n                  <\/svg>\n                  Direction: ${w.winddirection}\u00b0\n                <\/div>\n              <\/div>\n            <\/div>\n            \n            <div class=\"map-container\">\n              <iframe class=\"map\" src=\"https:\/\/www.openstreetmap.org\/export\/embed.html?bbox=${lon-0.02}%2C${lat-0.02}%2C${lon+0.02}%2C${lat+0.02}&#038;layer=mapnik&#038;marker=${lat}%2C${lon}\"><\/iframe>\n            <\/div>\n          <\/div>\n          \n          <div style=\"margin-top:12px\" class=\"small\">\n            <div>Data sources: OpenStreetMap (Nominatim) & Open-Meteo<\/div>\n            <div>Last updated: ${new Date().toLocaleString()}<\/div>\n          <\/div>\n        `;\n        \n      } catch (err) {\n        console.error(err);\n        showMessage('Error fetching weather data. Please try again.', 'error');\n      }\n    }\n\n    function showLoading(message) {\n      resultDiv.style.display = 'block';\n      resultDiv.innerHTML = `\n        <div style=\"text-align: center; padding: 15px;\">\n          <div class=\"loading\" style=\"border-top-color: var(--primary-color); margin: 0 auto 8px;\"><\/div>\n          <div>${message}<\/div>\n        <\/div>\n      `;\n    }\n\n    function showMessage(message, type = 'info') {\n      resultDiv.style.display = 'block';\n      resultDiv.innerHTML = `\n        <div class=\"${type}\" style=\"text-align: center; padding: 15px;\">\n          <div>${message}<\/div>\n        <\/div>\n      `;\n    }\n\n    \/\/ Helper function to prevent XSS\n    function escapeHtml(s) { \n      return String(s).replace(\/[&<>\"']\/g, (c) => ({ \n        '&':'&amp;',\n        '<':'&lt;',\n        '>':'&gt;',\n        '\"':'&quot;',\n        \"'\":'&#39;' \n      }[c])); \n    }\n  })();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>Instant Weather Finder Enter any location name or use your current location to get instant weather information. Get Weather Use my location Try: Delhi, Mumbai, Kolkata, Chennai, or any city worldwide<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-826","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages\/826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/comments?post=826"}],"version-history":[{"count":1,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages\/826\/revisions"}],"predecessor-version":[{"id":828,"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/pages\/826\/revisions\/828"}],"wp:attachment":[{"href":"https:\/\/tipsbyanita.in\/hi\/wp-json\/wp\/v2\/media?parent=826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}