谷歌无地图地址自动完成Google Places AutoComplete example without using Maps

最新推荐文章于 2021-11-17 14:58:59 发布

iteye_5904

最新推荐文章于 2021-11-17 14:58:59 发布

阅读量1.3k

点赞数

文章标签：移动开发 javascript java ViewUI

本文链接：https://blog.csdn.net/iteye_5904/article/details/82637199

版权

In this article I will explain with an example, how to implement the Google Places Autocomplete without using Google Maps.

In addition to this article will also explain how to use the Place changed event handler of the Google Autocomplete TextBox to get the selected place, its address and its location coordinates i.e. Latitude and Longitude.

Implementing Google Places Autocomplete without using Google Maps

The HTML Markup consists of an HTML TextBox using which the Google Places Autocomplete will be implemented.

The very first thing is to inherit the Google Maps API script along with the places library. Then inside the Google Maps window load event handler, the Google Places Autocomplete is applied to the TextBox and then the place_changed event handler is assigned to it.

The place_changed event handler is triggered when a place is selected in the Google Places Autocomplete TextBox. It first gets the selected place and then determines its address and its location coordinates i.e. Latitude and Longitude and then displays the details in JavaScript alert message box.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
            google.maps.event.addListener(places, 'place_changed', function () {
                var place = places.getPlace();
                var address = place.formatted_address;
                var latitude = place.geometry.location.A;
                var longitude = place.geometry.location.F;
                var mesg = "Address: " + address;
                mesg += "nLatitude: " + latitude;
                mesg += "nLongitude: " + longitude;
                alert(mesg);
            });
        });
    </script>
    <span>Location:</span>
    <input type="text" id="txtPlaces" style="width: 250px" placeholder="Enter a location" />
</body>
</html>

Google Autocomplete TextBox displaying places