logo
Blog single photo

Autocomplete search using Google Geocoding API


                        

Autocomplete search using Google Geocoding API

<div class="row">
    <div class="col-sm-12">
        <input id="pac-input" class="form-control controls" type="text" placeholder="Search Box">
        <div id="map" style="width:100%;height:400px"></div>
    </div>
    <div class="col-sm-12">
        <div class="form-group">
            <label for="email">Location Name :</label>
            <input type="text" class="form-control" value="" name="location_name" id="location_name">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
        <label for="pwd">Latitude :</label>
            <input type="text"  class="form-control" value="" id="latitude" name="latitude">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label for="pwd">Longitude :</label>
            <input type="text"  class="form-control" value="" id="longitude" name="longitude">
        </div>
    </div>
    <div class="col-sm-6">
        <span class="btn btn-primary" onclick="save_user_details()"> Save </span>
    </div>
</div>

<script>
       
function initialize()
{
    initAutocomplete();
}
function initMap(map)
{
    google.maps.event.addListener(map, 'dblclick', function(event)
    {
        var mlat=event.latLng.lat();
        var mlong=event.latLng.lng();
        $("#latitude").val(mlat);
        $("#longitude").val(mlong);
        var infoWindow = new google.maps.InfoWindow();
        var latlngbounds = new google.maps.LatLngBounds();
       
        var lat = parseFloat(mlat);
        var lng = parseFloat(mlong);
   
        var latlng = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'latLng': latlng }, function (results, status) {
           
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[1])
                {
                    $("#location_name").val("Location: " + results[1].formatted_address);
                }
            }
        });

    });
}

function initAutocomplete()

{
var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 22.5726, lng: 88.3639},
    zoom: 13,
    mapTypeId: 'roadmap'
});

initMap(map);

// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
});

var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();
    //$("#location_name").val("Location: " + places[1].formatted_address);
    if (places.length == 0) {
    return;
    }

    // Clear out the old markers.
    markers.forEach(function(marker) {
    marker.setMap(null);
    });
    markers = [];

    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
    if (!place.geometry) {
        console.log("Returned place contains no geometry");
        return;
    }
    var icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
    };

    // Create a marker for each place.
    markers.push(new google.maps.Marker({
        map: map,
        icon: icon,
        title: place.name,
        position: place.geometry.location
    }));

    if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
    } else {
        bounds.extend(place.geometry.location);
    }
    });
    map.fitBounds(bounds);
});
}


</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YourAPI&libraries=places&callback=initialize"></script>

Top