Is there a way to perform reverse geocoding using the Google Maps API?

Currently, I have incorporated the following code into my website to showcase google maps along with autocomplete functionality.

My ultimate goal is to enable reverse geocoding using longitude and latitude coordinates and exhibit the corresponding address on the page.

Can someone guide me on how to achieve this? Am I on the right track?

<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-33.8688, 151.2195),
          zoom: 17,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);

        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.bindTo('bounds', map);

        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
          map: map,
          draggable: true
        });

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
          infowindow.close();
          var place = autocomplete.getPlace();
          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Optimal zoom level.
          }

         google.maps.event.addListener(marker, "dragend", function (event) {
                var point = marker.getPosition();
                map.panTo(point);
                document.getElementById("latitude").value = point.lat();
                document.getElementById("longitude").value = point.lng();
            });

          var image = new google.maps.MarkerImage(
              place.icon,
              new google.maps.Size(71, 71),
              new google.maps.Point(0, 0),
              new google.maps.Point(17, 34),
              new google.maps.Size(35, 35));
          marker.setIcon(image);
          marker.setPosition(place.geometry.location);

          var address = '';
          if (place.address_components) {
            address = [(place.address_components[0] &&
                        place.address_components[0].short_name || ''),
                       (place.address_components[1] &&
                        place.address_components[1].short_name || ''),
                       (place.address_components[2] &&
                        place.address_components[2].short_name || '')
                      ].join(' ');

          }

          infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
          infowindow.open(map, marker);
        });


      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
javascriptapigoogle-mapsreverse-geocoding

Answer №1

Give this a shot for Google Reverse Geocoding:

Reverse geocoding

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Reverse Geocoding</title>
    <style>
      /* Define map height to size the div element */
      #map {
        height: 100%;
      }
      /* Optional: Fill window with sample page */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        width: 350px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
      #latlng {
        width: 225px;
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
      <input id="latlng" type="text" value="40.714224,-73.961452">
      <input id="submit" type="button" value="Reverse Geocode">
    </div>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: 40.731, lng: -73.997}
        });
        var geocoder = new google.maps.Geocoder;
        var infowindow = new google.maps.InfoWindow;

        document.getElementById('submit').addEventListener('click', function() {
          geocodeLatLng(geocoder, map, infowindow);
        });
      }

      function geocodeLatLng(geocoder, map, infowindow) {
        var input = document.getElementById('latlng').value;
        var latlngStr = input.split(',', 2);
        var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
        geocoder.geocode({'location': latlng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {
              map.setZoom(11);
              var marker = new google.maps.Marker({
                position: latlng,
                map: map
              });
              infowindow.setContent(results[0].formatted_address);
              infowindow.open(map, marker);
            } else {
              window.alert('No results found');
            }
          } else {
            window.alert('Geocoder failed due to: ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

including a close button when in use and excluding it when not in use

Seeking assistance with removing the "close" icon if it is not active. Here is the code I currently have $("#mason2 li div").click(function() { $(this).parent().hide().appendTo("#mason2").fadeIn(200); $(this).append('<p class="close"& ...

javascriptjquery

Access account using lightbox effect for the login form

In my simple CSS code, I have used a litebox view. I removed unnecessary CSS properties to keep it clean: <style> .black_overlay{ display: block; } .white_content { display: block; } < ...

javascript

Enhance your Next.js routing by appending to a slug/url using the <Link> component

In my Next.js project, I have organized my files in a folder-based structure like this: /dashboard/[appid]/users/[userid]/user_info.tsx When using href={"user_info"} with the built-in Next.js component on a user page, I expect the URL to dynamic ...

javascripttypescriptnext.js

I am interested in utilizing $axios in conjunction with Vuex constants for my project

My Dream Becoming Reality I frequently use this.$axios, so I attempted to store it in a constant, but unfortunately, it did not work as expected. Despite reading the official documentation, I couldn't grasp the reason behind this issue. Could it be d ...

javascriptvue.jsnuxt.jsvuex

How to properly implement ng-if for a select option in Angular.js?

Within the controller, I defined a scope variable: $scope.readOnly = true. In the HTML code: <select ng-if="readOnly" ng-model="readOnly" required> <option value="true" selected>True</option> <option value="false">False ...

javascriptangularjs

How can you call a function in JavaScript based on a condition?

Is there a way to conditionally truncate text using a function called Truncate only when the offsetHeight of the left div with class demo is greater than the offsetHeight of the right div? If this condition is not met, then simply return the original conte ...

javascripthtmlcss

Retrieve data in JSON format from an external source file

I've been attempting to retrieve JSON content from an external file named list.json, but unfortunately all of my efforts have been unsuccessful. I've created a prototype of my code on Jsfiddle (http://jsfiddle.net/ctmvcyy1/). I believe that the ...

javascriptphpjqueryhtmljson

When attempting to append a script element and the operation fails due to lack of authorization, which error is typically thrown

I am trying to handle a particular failure in this JavaScript code: var script = $wnd.document.createElement('script'); script.setAttribute('src', url); script.setAttribute('type', 'text/javascript'); When the URL ...

javascriptexceptionerror-handling

Interact with table cells using Angular's mousedown and mouseover events

I am looking to create a feature that highlights table cells when the mouse is pressed and hovered over a cell. Essentially, I want the cell to be highlighted whenever the mouse button is clicked and moved over it. However, in this example, there seems to ...

javascriptangulartypescript

Struggling with integrating Meteor.wrapAsync with the mailchimp-api-v3

I am currently exploring the use of mailchimp-api-v3 in a Meteor project (1.4.1.3) and I particularly like the batch support it offers. To make the call, I have enclosed it within Meteor's .wrapAsync function (which had a bit of a learning curve, but ...

javascriptmeteornpmmailchimp

The click event fails to trigger on dynamically loaded Ajax content

I've encountered an issue while loading content using ajax from external HTML Files. After the content is loaded, the click event doesn't seem to be working in Safari (including mobile safari) for any of the newly loaded elements such as ul, li, ...

javascriptjqueryajaxsafarimobile-safari

What is the best way to access all sections of a JSON file containing nested objects within objects?

Here is an example of my JSON file structure: [{ "articles": [ { "1": { "sections": [ {"1": "Lots of stuff here."} ] } }, { "2": { "sections": [ {"1": "And some more text right here"} ] } } }] The c ...

javascriptjqueryhtmljson

The <iframe> element pulls the src from the <select> tag, yet it requires the

(I found a solution in a previous post that works, but it requires a submit button. I believe using a JavaScript mouseup event might be a better alternative.) Is there a way to address this issue? <script> document.getElementById("dynamic_selection ...

javascriptjqueryiframe

Custom HTML form created by Ryan Fait with additional unique elements

My current script for styling checkboxes and radiobuttons is working perfectly: The issue arises when I dynamically add checkboxes and radiobuttons to the page using jQuery. The new elements do not inherit the custom styling. Is there a workaround for th ...

javascriptjquerycssinput

Displaying two div elements horizontally using Material-UI

Can the styled utility from mui be used to align 2 divs side by side? The documentation examples don't seem to cover this specific scenario. While answers on this and this address it, they don't relate to mui / material ui. I attempted the fol ...

javascriptreactjsmaterial-ui

Utilizing the toggle switch functionality in Django with a boolean field implementation

My work_experience model includes an "is_working" field which is set to true when a user is currently employed at a company. I am using a toggle switch on the front end and would like to update the boolean field value for "is_working" with a click. What lo ...

javascripthtmlcssdjango

What could be causing the issue with my validation for alphabetical input?

I am currently working on a registration form that only accepts alphabetical input. However, I am facing an issue where my error message appears regardless of whether I input an alphabetical or special character. According to my understanding, the code sho ...

javascripthtmlvalidation

Selenium WebDriver in Python has located the element, however, it is unable to click on it

My objective is to click on a checkbox found on the login page after identifying it by XPATH. However, I encountered an issue where I cannot perform the click action successfully. >>> elem = driver.find_element_by_xpath("//input[@type='check ...

javascriptpythonseleniumcheckboxwebdriver

store user settings in local storage

After writing some code with a link that toggles text visibility upon click, I now want to incorporate saving this state in web storage so that it persists upon page reload. As a beginner in JavaScript and HTML, this task has proven challenging for me. Th ...

javascriptjqueryhtmllocal-storage

Display or conceal several elements upon hover using JQuery and HTML

Here is the current progress I have made: <div style = "position: relative;"> <a href = "#games"> <div class="sidenavOff"> <img src = "images/card_normal.png" /> <img src = "images/category_icons/icon_games.png" style = "positio ...

javascriptjqueryhtmlcss