In this article I will explain with an example, how to display Address Location on Google Maps using Google Places AutoComplete.
When an Address Location is searched using Google Places AutoComplete, the Google Places API returns the geographical coordinates i.e. Latitude and Longitude of the searched Address Location, which is ultimately used to plot a marker and display it on the Google Map.
 
 
Displaying Address Location on Google Maps using Google Places AutoComplete
The HTML Markup consists of an HTML DIV for displaying Google Map and a HTML TextBox using which the Google Places Autocomplete will be implemented.
Inside the Google Map Load event handler, first the Google Map is loaded and the Google Places AutoComplete is assigned to the HTML TextBox and then the place_changed event handler is assigned to it.
Inside the Google Places AutoComplete place_changed event handler, the geographical coordinates of the searched Address Location are used to populate a marker on the Google Map and the Address Location is displayed on the Google Map.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #txtPlaces
        {
            background-color: #fff;
            padding: 0 11px 0 13px;
            width: 400px;
            font-family: Arial;
            font-size: 12pt;
            font-weight: 300;
            border: 1px solid transparent;
            border-radius: 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 30px;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }
        #dvPlaces
        {
            color: #fff;
            background-color: #0090CB;
            margin-top: 10px;
            border: 1px solid transparent;
            border-radius: 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            padding: 5px;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<API Key>&libraries=places"></script>
    <script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', function () {
            //Load the Google Map.
            var mumbai = new google.maps.LatLng(18.9750, 72.8258);
            var mapOptions = {
                zoom: 7,
                center: mumbai
            };
            var map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
 
            //Load the Places AutoComplete TextBox.
            var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
            places.bindTo('bounds', map);
 
            //Place the Places AutoComplete TextBox on the Google Map.
            map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById("dvPlaces"));
 
            //Initialize the marker.
            var marker = new google.maps.Marker({
                position: mumbai,
                map: map
            });
            marker.setVisible(false);
 
            //Assign the Place_Changed event handler to the Places AutoComplete TextBox.
            google.maps.event.addListener(places, 'place_changed', function () {
               
                //Remove previous marker.
                marker.setMap(null);
 
                //Plot the marker for the Address Location on the Google Map.
                var place = places.getPlace();
                if (place.geometry) {
                    marker = new google.maps.Marker({
                        position: place.geometry.location,
                        map: map
                    });
                    map.setCenter(place.geometry.location);
 
                    //Display Info Window for the Address Location.
                    var infoWindow = new google.maps.InfoWindow();
                    infoWindow.setContent("<div style = 'width:100px;min-height:10px'>" + place.name + "</div>");
                    infoWindow.open(map, marker);
                }
            });
        });
    </script>
    <div id="dvPlaces">
        <input type="text" id="txtPlaces" style="width: 200px" />
    </div>
    <div id="dvMap" style="width: 400px; height: 400px"></div>
</body>
</html>
 
 
Screenshot
Google Maps V3: Display Address Location on Google Maps using Places AutoComplete
 
 
Demo
View Demo
 
 
Downloads
Download Code