Google Maps API Returns "Undefined"

Question

I'm querying a string to Google Maps Geocoding API. I see a return in the console so I know that I'm connecting correctly, but the contents in the if statement return "Undefined". Any ideas as to why this would be?

$(document).ready(function(){

      // Search Submit  
      $("#search").submit(function(event){
            event.preventDefault("", function(){
                  //
                  });

            name = $("#search-name").val();
            console.log("Search term at submit is: "+name);

            // Send to Google Geocoding API

            var geocoder = new google.maps.Geocoder();

            geocoder.geocode({ 
                        address : name
                  }, function(results, status){

                        if (status == google.maps.GeocoderStatus.OK) {

                              console.log("results after query: "+ results.formatted_address + "\n" + results.length + " QTY Posts");
                  }

            );
      });
});

Answer 1

The results is array not a object. For the object use position or use foreach to read all returns.

Try change results.formatted_address to results[0].formatted_address.

var map;
var addressField;
var geocoder;

$(document).ready(function () {
    // Define map options
    var mapOptions = {
        center: new google.maps.LatLng(57.698254, 12.037024),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        panControl: true,
        zoomControl: true,
        mapTypeControl: true,
        scaleControl: true,
        streetViewControl: true,
        overviewMapControl: true
    };

    // Define map
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    // Define Gecoder
    geocoder = new google.maps.Geocoder();

    // Init searchbox
    initSearchBox();
});

function initSearchBox() {
    // Add searchbox
    var searchControlDiv = document.createElement('div');
    var searchControl = new SearchControl(searchControlDiv, map);

    searchControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(searchControlDiv);
}

function SearchControl(controlDiv, map) {
    // Set CSS styles for the DIV containing the control
    // Setting padding to 5 px will offset the control
    // from the edge of the map.
    controlDiv.style.padding = '5px';

    // Set CSS for the control border.
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = 'white';
    controlUI.style.borderStyle = 'solid';
    controlUI.style.borderWidth = '2px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Sök ex: gatunamn, stad';
    controlDiv.appendChild(controlUI);

    // Create the search box
    var controlSearchBox = document.createElement('input');
    controlSearchBox.id = 'search_address';
    controlSearchBox.size = '80';
    controlSearchBox.type = 'text';

    // Initiat autocomplete
    $(function () {
        $(controlSearchBox).autocomplete({
            source: function (request, response) {

                if (geocoder == null) {
                    geocoder = new google.maps.Geocoder();
                }

                geocoder.geocode({
                    'address': request.term
                }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var searchLoc = results[0].geometry.location;
                        var lat = results[0].geometry.location.lat();
                        var lng = results[0].geometry.location.lng();
                        var latlng = new google.maps.LatLng(lat, lng);
                        var bounds = results[0].geometry.bounds;
						
                        console.log(results)
                        
                        geocoder.geocode({
                            'latLng': latlng
                        }, function (results1, status1) {
                            if (status1 == google.maps.GeocoderStatus.OK) {
                                if (results1[1]) {
                                    response($.map(results1, function (loc) {
                                        return {
                                            label: loc.formatted_address,
                                            value: loc.formatted_address,
                                            bounds: loc.geometry.bounds
                                        }
                                    }));
                                }
                            }
                        });
                    }
                });
            },
            select: function (event, ui) {
                var pos = ui.item.position;
                var lct = ui.item.locType;
                var bounds = ui.item.bounds;

                if (bounds) {
                    map.fitBounds(bounds);
                }
            }
        });
    });

    // Set CSS for the control interior.
    var controlText = document.createElement('div');
    controlText.style.fontFamily = 'Arial,sans-serif';
    controlText.style.fontSize = '12px';
    controlText.style.paddingLeft = '4px';
    controlText.style.paddingRight = '4px';
    controlText.appendChild(controlSearchBox);
    controlUI.appendChild(controlText);
}

html {
    height: 100%
}
body {
    height: 100%;
    margin: 0;
    padding: 0
}
#map_canvas {
    height: 100%
}

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas" style="width:100%; height:100%;"></div>