{"id":4837,"date":"2025-10-14T14:37:51","date_gmt":"2025-10-14T14:37:51","guid":{"rendered":"https:\/\/roseperldev.wpenginepowered.com\/?page_id=4837"},"modified":"2025-10-14T15:31:23","modified_gmt":"2025-10-14T15:31:23","slug":"pagina-de-testes-da-api-do-google-maps","status":"publish","type":"page","link":"https:\/\/roseperl.com\/pt\/google-maps-api-testing-page\/","title":{"rendered":"P\u00e1gina de Teste da API Google Maps"},"content":{"rendered":"\n<style>\n    body {\n      font-family: Arial, sans-serif;\n      margin: 0;\n      padding: 0;\n    }\n\n    #consoleContainer {\n      position: relative;\n      top: 0;\n      left: 0;\n      right: 0;\n      background: #111;\n      border-bottom: 2px solid #444;\n      z-index: 9999;\n    }\n\n    #consoleFilters {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 8px 12px;\n      border-bottom: 1px solid #333;\n      background: #1a1a1a;\n    }\n\n    #consoleFilters label {\n      color: #ccc;\n      font-size: 13px;\n      cursor: pointer;\n    }\n\n    #consoleBox {\n      height: 140px;\n      overflow-y: auto;\n      padding: 10px;\n      font-family: monospace;\n      color: #ddd;\n      white-space: pre-wrap;\n      scroll-behavior: smooth;\n    }\n\n    .log-line { margin-bottom: 4px; }\n    .info { color: #66b3ff; }\n    .success { color: #00cc66; }\n    .warning { color: #ffcc00; }\n    .error { color: #ff6666; }\n\n    #controls {\n      position: relative;\n      top: 10px;\n      left: 0px;\n      background: white;\n      padding: 12px;\n      border-radius: 8px;\n      box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n      z-index: 9998;\n    }\n\n    input[type=\"text\"] {\n      width: 320px;\n      padding: 8px;\n      font-size: 14px;\n      margin-right: 8px;\n    }\n\n    button {\n      padding: 8px 14px;\n      background-color: #4a90e2;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n    }\n\n    button:hover { background-color: #3a7bc1; }\n\n    #map {\n      height: 100vh;\n      width: 100%;\n      margin-top: 240px;\n    }\n\n    .filter-active {\n      text-decoration: underline;\n      color: #4a90e2 !important;\n    }\n  <\/style>\n\n  <div id=\"consoleContainer\">\n    <div id=\"consoleFilters\">\n      <strong style=\"color: #fff;\">Filter:<\/strong>\n      <label><input type=\"radio\" name=\"filter\" value=\"all\" checked> All<\/label>\n      <label><input type=\"radio\" name=\"filter\" value=\"info\"> Info<\/label>\n      <label><input type=\"radio\" name=\"filter\" value=\"success\"> Success<\/label>\n      <label><input type=\"radio\" name=\"filter\" value=\"warning\"> Warning<\/label>\n      <label><input type=\"radio\" name=\"filter\" value=\"error\"> Error<\/label>\n      <button id=\"clearBtn\" style=\"margin-left:auto;background:#333;border:none;color:#ccc;padding:6px 10px;border-radius:5px;cursor:pointer;\">Clear<\/button>\n    <\/div>\n    <div id=\"consoleBox\"><\/div>\n  <\/div>\n\n  <div id=\"controls\">\n    <label>Enter your Google Maps API Key:<\/label><br \/>\n    <input type=\"text\" id=\"apiKey\" placeholder=\"Enter API key...\" \/>\n    <button id=\"loadMapBtn\">Test Key &#038; Load Map<\/button>\n  <\/div>\n\n  <div id=\"map\"><\/div>\n\n  <script>\n    const consoleBox = document.getElementById('consoleBox');\n    let allLogs = [];\n\n    \/\/ Log message to UI and store\n    function logMessage(msg, type = 'info') {\n      const entry = {\n        time: new Date().toLocaleTimeString(),\n        type,\n        msg\n      };\n      allLogs.push(entry);\n      renderLogs();\n      console[type === 'error' ? 'error' : 'log'](msg);\n    }\n\n    \/\/ Render logs with filter\n    function renderLogs() {\n      const filter = document.querySelector('input[name=\"filter\"]:checked').value;\n      consoleBox.innerHTML = '';\n      allLogs.forEach(log => {\n        if (filter === 'all' || log.type === filter) {\n          const div = document.createElement('div');\n          div.className = `log-line ${log.type}`;\n          div.textContent = `[${log.time}] (${log.type.toUpperCase()}) ${log.msg}`;\n          consoleBox.appendChild(div);\n        }\n      });\n      consoleBox.scrollTop = consoleBox.scrollHeight;\n    }\n\n    \/\/ Filter change listener\n    document.querySelectorAll('input[name=\"filter\"]').forEach(radio => {\n      radio.addEventListener('change', renderLogs);\n    });\n\n    \/\/ Clear logs\n    document.getElementById('clearBtn').addEventListener('click', () => {\n      allLogs = [];\n      consoleBox.innerHTML = '';\n    });\n\n    \/\/ Global error handlers\n    window.onerror = (msg, src, line, col, err) => {\n      if (typeof msg === 'string' && msg.includes('Google Maps JavaScript API')) {\n        if (msg.includes('RefererNotAllowedMapError')) {\n          logMessage('Google Maps Error: RefererNotAllowedMapError \u2014 domain not authorized.', 'error');\n        } else if (msg.includes('BillingNotEnabledMapError')) {\n          logMessage('Google Maps Error: BillingNotEnabledMapError \u2014 billing not enabled.', 'error');\n        } else {\n          logMessage('Google Maps JavaScript API error: ' + msg, 'error');\n        }\n      } else {\n        logMessage(`JavaScript Error: ${msg} (${src}:${line}:${col})`, 'error');\n      }\n    };\n\n    window.gm_authFailure = function() {\n      logMessage('Google Maps Authentication Failed \u2014 invalid key or unauthorized domain.', 'error');\n    };\n\n    window.addEventListener('unhandledrejection', e => {\n      logMessage('Unhandled Promise Rejection: ' + e.reason, 'warning');\n    });\n\n    \/\/ Google Maps logic\n    let map, service, geocoder, userMarker;\n\n    function handleGoogleStatus(status, action) {\n      if (\n        status !== google.maps.GeocoderStatus.OK &&\n        status !== google.maps.places.PlacesServiceStatus.OK\n      ) {\n        logMessage(`Google Maps API Error during ${action}: ${status}`, 'error');\n      } else {\n        logMessage(`Google Maps ${action} succeeded: ${status}`, 'success');\n      }\n    }\n\n    async function initMap() {\n      logMessage('Getting your location and initializing map...', 'info');\n\n      if (!navigator.geolocation) {\n        logMessage('Geolocation not supported by this browser.', 'error');\n        return;\n      }\n\n      navigator.geolocation.getCurrentPosition(\n        position => {\n          const userLocation = {\n            lat: position.coords.latitude,\n            lng: position.coords.longitude,\n          };\n\n          map = new google.maps.Map(document.getElementById('map'), {\n            center: userLocation,\n            zoom: 14,\n          });\n\n          logMessage('Google Map initialized successfully.', 'success');\n\n          userMarker = new google.maps.Marker({\n            position: userLocation,\n            map,\n            title: 'Your Location',\n          });\n\n          geocoder = new google.maps.Geocoder();\n          service = new google.maps.places.PlacesService(map);\n\n          geocoder.geocode({ location: userLocation }, (results, status) => {\n            handleGoogleStatus(status, 'Geocoding');\n            if (status === 'OK' && results[0]) {\n              logMessage('Your address: ' + results[0].formatted_address, 'info');\n            }\n          });\n\n          const request = {\n            location: userLocation,\n            radius: 1000,\n            type: ['cafe'],\n          };\n          service.nearbySearch(request, (results, status) => {\n            handleGoogleStatus(status, 'Places Nearby Search');\n            if (status === google.maps.places.PlacesServiceStatus.OK) {\n              results.forEach(place => {\n                new google.maps.Marker({\n                  position: place.geometry.location,\n                  map,\n                  title: place.name,\n                });\n              });\n              logMessage(`Found ${results.length} nearby caf\u00e9s.`, 'success');\n            }\n          });\n        },\n        err => {\n          logMessage('Error getting location: ' + err.message, 'error');\n        }\n      );\n    }\n\n    \/\/ Dynamic script loader\n    document.getElementById('loadMapBtn').addEventListener('click', () => {\n      const apiKey = document.getElementById('apiKey').value.trim();\n      if (!apiKey) {\n        logMessage('Please enter a valid API key.', 'warning');\n        return;\n      }\n\n      logMessage('Loading Google Maps API...', 'info');\n\n      const oldScript = document.getElementById('gmapsScript');\n      if (oldScript) oldScript.remove();\n\n      const script = document.createElement('script');\n      script.id = 'gmapsScript';\n      script.src = `https:\/\/maps.googleapis.com\/maps\/api\/js?key=${apiKey}&libraries=places&callback=initMap`;\n      script.async = true;\n      script.defer = true;\n      script.onerror = () => {\n        logMessage('Failed to load Google Maps API. Check your key, billing, or referrer restrictions.', 'error');\n      };\n      document.head.appendChild(script);\n    });\n  <\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Filter: All Info Success Warning Error Clear Enter your Google Maps API Key: Test Key &#038; Load Map<\/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-4837","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Google Maps API Testing Page - Rose Perl Technology LLC<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/roseperl.com\/pt\/pagina-de-testes-da-api-do-google-maps\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Google Maps API Testing Page - Rose Perl Technology LLC\" \/>\n<meta property=\"og:description\" content=\"Filter: All Info Success Warning Error Clear Enter your Google Maps API Key: Test Key &#038; Load Map\" \/>\n<meta property=\"og:url\" content=\"https:\/\/roseperl.com\/pt\/pagina-de-testes-da-api-do-google-maps\/\" \/>\n<meta property=\"og:site_name\" content=\"Rose Perl Technology LLC\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/p\/Rose-Perl-Technology-LLC-61576718883966\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-14T15:31:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/roseperl.com\/wp-content\/uploads\/2025\/12\/FACEBOOK-BANNER.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"820\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/roseperl.com\\\/google-maps-api-testing-page\\\/\",\"url\":\"https:\\\/\\\/roseperl.com\\\/google-maps-api-testing-page\\\/\",\"name\":\"Google Maps API Testing Page - Rose Perl Technology LLC\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/roseperl.com\\\/#website\"},\"datePublished\":\"2025-10-14T14:37:51+00:00\",\"dateModified\":\"2025-10-14T15:31:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/roseperl.com\\\/google-maps-api-testing-page\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/roseperl.com\\\/google-maps-api-testing-page\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/roseperl.com\\\/google-maps-api-testing-page\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/roseperl.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Google Maps API Testing Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/roseperl.com\\\/#website\",\"url\":\"https:\\\/\\\/roseperl.com\\\/\",\"name\":\"Rose Perl Technology LLC\",\"description\":\"eCommerce Software Designed to Help Brands Scale.\",\"publisher\":{\"@id\":\"https:\\\/\\\/roseperl.com\\\/#organization\"},\"alternateName\":\"Rose Perl Apps\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/roseperl.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/roseperl.com\\\/#organization\",\"name\":\"Rose Perl Technology LLC\",\"url\":\"https:\\\/\\\/roseperl.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/roseperl.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/mlix8gzaatqh.i.optimole.com\\\/w:500\\\/h:100\\\/q:mauto\\\/f:best\\\/id:6682f0bb65612ca7e7c929eb60567ef7\\\/https:\\\/\\\/roseperl.com\\\/rp-svg-black-2.webp\",\"contentUrl\":\"https:\\\/\\\/mlix8gzaatqh.i.optimole.com\\\/w:500\\\/h:100\\\/q:mauto\\\/f:best\\\/id:6682f0bb65612ca7e7c929eb60567ef7\\\/https:\\\/\\\/roseperl.com\\\/rp-svg-black-2.webp\",\"width\":500,\"height\":100,\"caption\":\"Rose Perl Technology LLC\"},\"image\":{\"@id\":\"https:\\\/\\\/roseperl.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/p\\\/Rose-Perl-Technology-LLC-61576718883966\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"P\u00e1gina de Teste da API do Google Maps - Rose Perl Technology LLC","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/roseperl.com\/pt\/pagina-de-testes-da-api-do-google-maps\/","og_locale":"pt_PT","og_type":"article","og_title":"Google Maps API Testing Page - Rose Perl Technology LLC","og_description":"Filter: All Info Success Warning Error Clear Enter your Google Maps API Key: Test Key &#038; Load Map","og_url":"https:\/\/roseperl.com\/pt\/pagina-de-testes-da-api-do-google-maps\/","og_site_name":"Rose Perl Technology LLC","article_publisher":"https:\/\/www.facebook.com\/p\/Rose-Perl-Technology-LLC-61576718883966\/","article_modified_time":"2025-10-14T15:31:23+00:00","og_image":[{"width":820,"height":360,"url":"https:\/\/roseperl.com\/wp-content\/uploads\/2025\/12\/FACEBOOK-BANNER.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/roseperl.com\/google-maps-api-testing-page\/","url":"https:\/\/roseperl.com\/google-maps-api-testing-page\/","name":"P\u00e1gina de Teste da API do Google Maps - Rose Perl Technology LLC","isPartOf":{"@id":"https:\/\/roseperl.com\/#website"},"datePublished":"2025-10-14T14:37:51+00:00","dateModified":"2025-10-14T15:31:23+00:00","breadcrumb":{"@id":"https:\/\/roseperl.com\/google-maps-api-testing-page\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/roseperl.com\/google-maps-api-testing-page\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/roseperl.com\/google-maps-api-testing-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/roseperl.com\/"},{"@type":"ListItem","position":2,"name":"Google Maps API Testing Page"}]},{"@type":"WebSite","@id":"https:\/\/roseperl.com\/#website","url":"https:\/\/roseperl.com\/","name":"Rose Perl Technology LLC","description":"Software de eCommerce Concebido para Ajudar Marcas a Crescer.","publisher":{"@id":"https:\/\/roseperl.com\/#organization"},"alternateName":"Rose Perl Apps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/roseperl.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/roseperl.com\/#organization","name":"Rose Perl Technology LLC","url":"https:\/\/roseperl.com\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/roseperl.com\/#\/schema\/logo\/image\/","url":"https:\/\/mlix8gzaatqh.i.optimole.com\/w:500\/h:100\/q:mauto\/f:best\/id:6682f0bb65612ca7e7c929eb60567ef7\/https:\/\/roseperl.com\/rp-svg-black-2.webp","contentUrl":"https:\/\/mlix8gzaatqh.i.optimole.com\/w:500\/h:100\/q:mauto\/f:best\/id:6682f0bb65612ca7e7c929eb60567ef7\/https:\/\/roseperl.com\/rp-svg-black-2.webp","width":500,"height":100,"caption":"Rose Perl Technology LLC"},"image":{"@id":"https:\/\/roseperl.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/p\/Rose-Perl-Technology-LLC-61576718883966\/"]}]}},"_links":{"self":[{"href":"https:\/\/roseperl.com\/pt\/wp-json\/wp\/v2\/pages\/4837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roseperl.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roseperl.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roseperl.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roseperl.com\/pt\/wp-json\/wp\/v2\/comments?post=4837"}],"version-history":[{"count":0,"href":"https:\/\/roseperl.com\/pt\/wp-json\/wp\/v2\/pages\/4837\/revisions"}],"wp:attachment":[{"href":"https:\/\/roseperl.com\/pt\/wp-json\/wp\/v2\/media?parent=4837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}