4

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 but it doesn't auto-point to the location typed. Please help me on this I am a noob in javascript. This is the fiddle that I am working on: http://jsfiddle.net/qrAGU/. I will really appreciate your help.

JS:

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'
};

function initialize() {
    var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    var input = (
    document.getElementById('autocomplete'));
    /*
var types = document.getElementById('type-selector');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);*/
// tried also moving the comment only for types, but still nothing  
    autocomplete = new google.maps.places.Autocomplete(
    input,
    { 
types: ['geocode'] 
    }
    );
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        fillInAddress();
        infowindow.close();
        marker.setVisible(false);
        autocomplete.bindTo('bounds', map);
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            return;
        }
    });
    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);  // Why 17? Because it looks good.
    }
    marker.setIcon(/** @type {google.maps.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(35, 35)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);
    var address = '';
    if (place.address_components) {
        address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
        ].join(' ');
    }

    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);
    //});

    // Sets a listener on a radio button to change the filter type on Places
    // Autocomplete.
    function setupClickListener(id, types) {
        var radioButton = document.getElementById(id);
        google.maps.event.addDomListener(radioButton, 'click', function() {
            autocomplete.setTypes(types);
        });
    }

}
google.maps.event.addDomListener(window, 'load', initialize);
// [START region_fillform]
function fillInAddress() {
    // 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;
    }

    // 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;
        }
    }
}
// [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = new google.maps.LatLng(
            position.coords.latitude, position.coords.longitude);
            autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
            geolocation));
        });
    }
}

HTML

<div id="locationField">
    <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" class="controls"></input>
</div>

<table id="address">
    <tr>
        <td class="label">Street address</td>
        <td class="slimField">
            <input class="field" id="street_number" disabled="true"></input>
        </td>
        <td class="wideField" colspan="2">
            <input class="field" id="route" disabled="true"></input>
        </td>
    </tr>
    <tr>
        <td class="label">City</td>
        <td class="wideField" colspan="3">
            <input class="field" id="locality" disabled="true"></input>
        </td>
    </tr>
    <tr>
        <!--<td class="label">State</td>
        <td class="slimField"><input class="field"
              id="administrative_area_level_1" disabled="true"></input></td>-->
        <td class="label">Zip code</td>
        <td class="wideField">
            <input class="field" id="postal_code" disabled="true"></input>
        </td>
    </tr>
    <tr>
        <td class="label">Country</td>
        <td class="wideField" colspan="3">
            <input class="field" id="country" disabled="true"></input>
        </td>
    </tr>
</table>
<div id="map-canvas"></div>
user3650099
  • 131
  • 1
  • 7
  • I appreciate the up votes, I am still struggling to find a solution, but with limited knowledge of javascript there is a bit of a problem. – user3650099 May 26 '14 at 07:00

1 Answers1

5

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

<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="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;
  }
  #address td {
    font-size: 10pt;
  }
  .field {
    width: 99%;
  }
  .slimField {
    width: 80px;
  }
  .wideField {
    width: 200px;
  }
  #locationField {
    height: 20px;
    margin-bottom: 2px;
  }
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="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'
};

function initialize() {
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 marker
    var 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>
<body onload="initialize()">
<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address"
         onFocus="geolocate()" type="text"></input>
</div>

<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="slimField"><input class="field" id="street_number" disabled="true"></input></td>
    <td class="wideField" colspan="2"><input class="field" id="route" disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">City</td>
    <td class="wideField" colspan="3"><input class="field" id="locality"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField"><input class="field"
          id="administrative_area_level_1" disabled="true"></input></td>
    <td class="label">Zip code</td>
    <td class="wideField"><input class="field" id="postal_code"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3"><input class="field"
          id="country" disabled="true"></input></td>
  </tr>
</table>

<div id="map-canvas"></div>
</body>
</html>

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

jonaypelluz
  • 368
  • 4
  • 13
  • Yes, this is exactly what I wanted, Odd Thing function fillinaddress not present. – user3650099 May 26 '14 at 08:57
  • 1
    Yes, sorry about that, I included everything in the same function, I only create more functions when I reuse them somewhere else, but you can mix this code with yours :-) I am glad I understodd well hehe, Regards, Jonay Pelluz – jonaypelluz May 26 '14 at 09:13
  • Ah one more thing, I am using somethng like hidden tabs, and search on SO and found that I needed to add ` google.maps.event.addListenerOnce(map, 'idle', function () { google.maps.event.trigger(map, 'resize'); });` but map still not getting rendered completely I believe that I am using hidden tabs or smth like that. I did not understood exactly how to do a `callback` could you please point me to a good direction. – user3650099 May 27 '14 at 06:58
  • I think here they talk about it, http://stackoverflow.com/questions/7084363/google-maps-in-hidden-div and http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture hope it helps – jonaypelluz May 28 '14 at 09:47
  • This is what I want too. But it is possible, after the address is filled and the marker is shown on the map, to make it available to reposition it manually without changing address. Some times gmaps are not so accurate and it is good to be available users to be able to select exact position of marker with cursor. – Ivo Oct 04 '16 at 14:19