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

天梯梦

浏览: 13741439 次
性别:
来自: 洛杉矶

最近访客更多访客>>

xierui54

简_单

bcrun

hur5457

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Google / Facebook / Pinterest / SNS

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