Adding Auto Address from google map in registration form
Adding Auto Fill Address Form on Users registration form:
HTML:
<div class="col-lg-12">
<div id="locationField">
<input id="autocomplete" name="event[address]" placeholder="*Enter your address", required= "true" />
</div>
</div>
<table id="address">
<div class="col-md-6 col-sm-12">
<fieldset>
<%= f.text_field :city, placeholder: "*Your City", id: "locality" %>
</fieldset>
</div>
<div class="col-md-6 col-sm-12">
<fieldset>
<%= f.text_field :state, placeholder: "*Your State",id: "state"%>
</fieldset>
</div>
<div class="col-md-3 col-sm-12">
<fieldset>
<%= f.text_field :zip_code, placeholder: "*Pin Code",id: "zipcode"%>
</fieldset>
</div>
<div class="col-md-6 col-sm-12">
<fieldset>
<%= f.text_field :country, placeholder: "*Your Country",id: "address_line"%>
</fieldset>
</div>
</table>
JAVASCRIPT:
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvuPSxdugPS2FJQibo-i78wVZHWgmKemk&libraries=places"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>
<script type="text/javascript">
$("#autocomplete").geocomplete().bind("geocode:result", function(event, result){
b = result
a = result.address_components
for ( var i = 0, l = a.length; i < l; i++ ) {
if (a[i].types.indexOf('administrative_area_level_2') > -1)
{
$('#locality').val(a[i].long_name)
}
if (a[i].types.indexOf("country") > -1)
{
$('#address_line').val(a[i].long_name)
}
if (a[i].types.indexOf("postal_code") > -1)
{
$('#zipcode').val(a[i].long_name)
}
if (a[i].types.indexOf('administrative_area_level_1') > -1)
{
$('#state').val(a[i].long_name)
}
}
console.log("Data", result);
$("#location_latitude").val(result.geometry.viewport.Ya.g)
$("#location_longitude").val(result.geometry.viewport.Ta.g)
});
// necessary variables
var mapLeft, mapRight;
var infoWindowLeft, infoWindowRight;
// markersData variable stores the infation necessary to each marker
function initialize(setMap) {
var mapOptions;
if(setMap == "mapLeft") {
mapOptions = {
center: new google.maps.LatLng(28.7041,77.1025),
zoom: 11,
mapTypeId: 'roadmap',
};
mapLeft = new google.maps.Map(document.getElementById('map-canvas-left'), mapOptions);
// a new Info Window is created
infoWindowLeft = new google.maps.InfoWindow();
// Event that closes the Info Window with a click on the map
google.maps.event.addListener(mapLeft, 'click', function() {
infoWindowLeft.close();
});
}
else {
mapOptions = {
center: new google.maps.LatLng(28.7041,77.1025),
zoom: 9,
mapTypeId: 'roadmap',
};
mapRight = new google.maps.Map(document.getElementById('map-canvas-right'), mapOptions);
// a new Info Window is created
infoWindowRight = new google.maps.InfoWindow();
// Event that closes the Info Window with a click on the map
google.maps.event.addListener(mapRight, 'click', function() {
infoWindowRight.close();
});
}
// Finally displayMarkers() function is called to begin the markers creation
displayMarkers(setMap);
// Create second map only when initialize function is called for the first time.
// Second time setMap is equal to mapRight, so this condition returns false and it will not run
if(setMap == "mapLeft"){
initialize("mapRight");
}
}
google.maps.event.addDomListener(window, 'load', function(){ initialize("mapLeft") });
// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers(setMap){
var markersData;
var map;
if(setMap == "mapLeft"){
markersData = markersDataLeft;
map = mapLeft;
}
// this variable sets the map bounds according to markers position
var bounds = new google.maps.LatLngBounds();
// for loop traverses markersData array calling createMarker function for each marker
for (var i = 0; i < markersData.length; i++){
var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
var name = markersData[i].name;
var address1 = markersData[i].address1;
var address2 = markersData[i].address2;
var postalCode = markersData[i].postalCode;
createMarker(setMap, latlng, name, address1, address2, postalCode);
// marker position is added to bounds variable
bounds.extend(latlng);
}
// Finally the bounds variable is used to set the map bounds
// with fitBounds() function
map.fitBounds(bounds);
}
// This function creates each marker and it sets their Info Window content
function createMarker(setMap, latlng, name, address1, address2, postalCode){
var map;
var infoWindow;
if(setMap == "mapLeft"){
map = mapLeft;
infoWindow = infoWindowLeft;
} else {
map = mapRight;
infoWindow = infoWindowRight;
}
var marker = new google.maps.Marker({
map: map,
position: latlng,
title: name
});
// This event expects a click on a marker
// When this event is fired the Info Window content is created
// and the Info Window is opened.
google.maps.event.addListener(marker, 'click', function() {
// Creating the content to be inserted in the infowindow
var iwContent = '<div id="iw_container">' +
'<div class="iw_title">' + name + '</div>' +
'<div class="iw_content">' + address1 + '<br />' + address2 + '<br />' +postalCode + '</div></div>';
// including content to the Info Window.
infoWindow.setContent(iwContent);
// opening the Info Window in the current map and at the current marker location.
infoWindow.open(map, marker);
});
}
</script>
Comments
Post a Comment