Back

Place autocomplete

Note: This service requires your project to have an associated billing information.

Make sure to ENABLE this Places API in your google map console dashboard.
The Place Autocomplete service can match on full words and substrings, resolving place names, addresses, and plus codes. Applications can therefore send queries as the user types, to provide on-the-fly place predictions.

You can use places autocomplete by calling the PlaceAutocomplete method of the map object like this:

 map.PlaceAutocomplete(query, type, lat, lng, radius, callback)


It's pretty the same method implementation as the query autocomplete with additional "type" parameter. And the callback implementation is the same.
query String
Required. The text string on which to search. The Places service will return candidate matches based on this string and order results based on their perceived relevance.
type String
Optional. The types of place results to return. Default is "establishment"
lat String
Optional. The latitude of the point around which you wish to retrieve place information
lng String
Optional. The longitude of the point around which you wish to retrieve place information
radius String
Optional. The distance (in meters) within which to return place results
callback Function
Required. The function where to pass the result in the sequence (error, result).

Places Types

geocode, address, establishment

The placeautocomplete will match the whole string into the search having the same string of the query. Example "Amoeba" will return all establishments or geocode (depends on the type you pass) of the place which name has Amoeba in it. In order to filter the result within the specified location, pass the latitude and longitude of the center coordinate and specify the radius to limit the result in the specified area. Results outside the area are not included anymore even if it matches the query.

Sample result "query=Paris type=geocode"

[
  {
     "description" : "Paris, France",
     "distance_meters" : 8030004,
     "id" : "691b237b0322f28988f3ce03e321ff72a12167fd",
     "matched_substrings" : [
        {
           "length" : 5,
           "offset" : 0
        }
     ],
     "place_id" : "ChIJD7fiBh9u5kcRYJSMaMOCCwQ",
     "reference" : "CjQlAAAA_KB6EEceSTfkteSSF6U0pvumHCoLUboRcDlAH05N1pZJLmOQbYmboEi0SwXBSoI2EhAhj249tFDCVh4R-PXZkPK8GhTBmp_6_lWljaf1joVs1SH2ttB_tw",
     "terms" : [
        {
           "offset" : 0,
           "value" : "Paris"
        },
        {
           "offset" : 7,
           "value" : "France"
        }
     ],
     "types" : [ "locality", "political", "geocode" ]
  },
  {
     "description" : "Paris-Madrid Grocery (Spanish Table Seattle), Western Avenue, Seattle, WA, USA",
     "distance_meters" : 12597,
     "id" : "f4231a82cfe0633a6a32e63538e61c18277d01c0",
     "matched_substrings" : [
        {
           "length" : 5,
           "offset" : 0
        }
     ],
     "place_id" : "ChIJHcYlZ7JqkFQRlpy-6pytmPI",
     "reference" : "ChIJHcYlZ7JqkFQRlpy-6pytmPI",
     "structured_formatting" : {
        "main_text" : "Paris-Madrid Grocery (Spanish Table Seattle)",
        "main_text_matched_substrings" : [
           {
              "length" : 5,
              "offset" : 0
           }
        ],
        "secondary_text" : "Western Avenue, Seattle, WA, USA"
     },
     "terms" : [
        {
           "offset" : 0,
           "value" : "Paris-Madrid Grocery (Spanish Table Seattle)"
        },
        {
           "offset" : 46,
           "value" : "Western Avenue"
        },
        {
           "offset" : 62,
           "value" : "Seattle"
        },
        {
           "offset" : 71,
           "value" : "WA"
        },
        {
           "offset" : 75,
           "value" : "USA"
        }
     ],
     "types" : [
        "grocery_or_supermarket",
        "food",
        "store",
        "point_of_interest",
        "establishment"
     ]
  },
  {
     "description" : "Paris, TX, USA",
     "distance_meters" : 2712292,
     "id" : "518e47f3d7f39277eb3bc895cb84419c2b43b5ac",
     "matched_substrings" : [
        {
           "length" : 5,
           "offset" : 0
        }
     ],
     "place_id" : "ChIJmysnFgZYSoYRSfPTL2YJuck",
     "reference" : "ChIJmysnFgZYSoYRSfPTL2YJuck",
     "structured_formatting" : {
        "main_text" : "Paris",
        "main_text_matched_substrings" : [
           {
              "length" : 5,
              "offset" : 0
           }
        ],
        "secondary_text" : "TX, USA"
     },
     "terms" : [
        {
           "offset" : 0,
           "value" : "Paris"
        },
        {
           "offset" : 7,
           "value" : "TX"
        },
        {
           "offset" : 11,
           "value" : "USA"
        }
     ],
     "types" : [ "locality", "political", "geocode" ]
  },
    ...additional results ...
]

The result is an array of objects. Please note that the id is different from place_id. You can get for the details of a place by calling the GetPlaceDetails method of the map object passing the place_id or description you retrieve from placeautocomplete result. If applicable, always use the place_id.

Query autocomplete example

app.LoadPlugin("MapView");

function OnStart() {
    lay = app.CreateLayout("Linear", "VCenter, FillXY");
        
        var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck";
        
        map = app.CreateMapView(apiKey, 0.9, 0.5, 7.0689323, 125.6114588, 13);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    var query = "pizza near new yor";
    map.PlaceAutocomplete(query, null, null, null, null, OnResult);
}
function OnResult(error, result) {
    if(error) {
        alert(error);
        return;
    }
    app.Alert(result);
}
Copy    Run   

Query autocomplete example

app.LoadPlugin("MapView");

function OnStart() {
    lay = app.CreateLayout("Linear", "VCenter, FillXY");
        
        var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck";
        
        map = app.CreateMapView(apiKey, 0.9, 0.5, 7.0689323, 125.6114588, 13);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    var query = "SM Lanang";
    map.PlaceAutocomplete(query, "geocode", 7.0689323, 125.6114588, 10000, OnResult);    //10km within the center
}
function OnResult(error, res) {
    if(error) {
        alert(error);
        return;
    }
    result = JSON.parse(res);
    if(result.predictions && result.predictions.length > 0) {
    
        // choose the first entry result
        pred = result.predictions[0];
        
        // choosing the place_id if applicable
        q = pred.place_id ? pred.place_id : pred.description;
        
        // and find the details using default fields
        map.GetPlaceDetails(q, null, OnDetails);
    }
}
function OnDetails(error, res) {
    if(error) return;
    loc = res.geometry.location;
    marker = map.CreateMarker(loc.lat, loc.lng);
}
Copy    Run