Integrating Google Maps Place Form Into The Autocomplete Address Form Javascript

September 30, 2023 Post a Comment

I am trying to integrate this Place Form into this Autocomplete address form. But I have failed on making both work. Currently it works only the address complete form, map loads bu

Solution 1:

If I understood well you are looking for something like this:

<!DOCTYPE html><html><head><title>Place Autocomplete Address Form</title><metaname="viewport"content="initial-scale=1.0, user-scalable=no"><metacharset="utf-8"><style>html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
  #map-canvas { width: 600px; height: 400px; }
  #locationField, #controls {
    position: relative;
    width: 480px;
  }
  #autocomplete {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 99%;
  }
  .label {
    text-align: right;
    font-weight: bold;
    width: 100px;
    color: #303030;
  }
  #address {
    border: 1px solid #000090;
    background-color: #f0f0ff;
    width: 480px;
    padding-right: 2px;
  }
  #addresstd {
    font-size: 10pt;
  }
  .field {
    width: 99%;
  }
  .slimField {
    width: 80px;
  }
  .wideField {
    width: 200px;
  }
  #locationField {
    height: 20px;
    margin-bottom: 2px;
  }
</style><linktype="text/css"rel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"><scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script><script>// This example displays an address form, using the autocomplete feature// of the Google Places API to help users fill in the information.var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};

functioninitialize() {
var mapOptions = {
    center: new google.maps.LatLng(-33.8688, 151.2195),
    zoom: 13
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), {types: ['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed', function() {   
    // Get the place details from the autocomplete object.var place = autocomplete.getPlace();

    for (var component in componentForm) {
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
    }   
    var newPos = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());  
    map.setOptions({
        center: newPos,
        zoom: 15
    });
    //add a markervar marker = new google.maps.Marker({
        position: newPos,
        map: map,
        title: "New marker"
    });

    // Get each component of the address from the place details// and fill the corresponding field on the form.for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
        }
    }
});
}

</script></head><bodyonload="initialize()"><divid="locationField"><inputid="autocomplete"placeholder="Enter your address"onFocus="geolocate()"type="text"></input></div><tableid="address"><tr><tdclass="label">Street address</td><tdclass="slimField"><inputclass="field"id="street_number"disabled="true"></input></td><tdclass="wideField"colspan="2"><inputclass="field"id="route"disabled="true"></input></td></tr><tr><tdclass="label">City</td><tdclass="wideField"colspan="3"><inputclass="field"id="locality"disabled="true"></input></td></tr><tr><tdclass="label">State</td><tdclass="slimField"><inputclass="field"id="administrative_area_level_1"disabled="true"></input></td><tdclass="label">Zip code</td><tdclass="wideField"><inputclass="field"id="postal_code"disabled="true"></input></td></tr><tr><tdclass="label">Country</td><tdclass="wideField"colspan="3"><inputclass="field"id="country"disabled="true"></input></td></tr></table><divid="map-canvas"></div></body></html>

It updates the map and the form at the same time, I hope it helps

javascript dox

Integrating Google Maps Place Form Into The Autocomplete Address Form Javascript

Solution 1:

Post a Comment for "Integrating Google Maps Place Form Into The Autocomplete Address Form Javascript"