Skip to content

Instantly share code, notes, and snippets.

@cAstraea

cAstraea/mine.hbs

Last active September 22, 2016 18:05
Show Gist options
  • Save cAstraea/4505a23260491335f238 to your computer and use it in GitHub Desktop.
Save cAstraea/4505a23260491335f238 to your computer and use it in GitHub Desktop.
Download ZIP
google autocomplete
Raw
mine.hbs
<html>
<head>
<style>
#map_canvas {
width: 50%;
height: 300px;
margin: 0px 0;
}
.hiddenMap { position: absolute;
left: -100%; }
</style>
</head>
<body>
<div id="map_canvas" class="hiddenMap"></div>
<form>
<input id="autocomplete" type="text" placeholder="Type in an address" value="" />
<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField"><input id="street_number"
disabled="true"></input></td>
<td class="wideField" colspan="2"><input id="route"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input id="locality"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input
id="administrative_area_level_1" disabled="true"></input></td>
<td class="label">Zip code</td>
<td class="wideField"><input id="postal_code"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3"><input
id="country" disabled="true"></input></td>
</tr>
</table>
</form>
</body></html>
Raw
records.js
({
/* because accounts already has a record view, we need to extend it */
extendsFrom: 'AccountsRecordView',
/* if you are running 7.2.0, you will need to use RecordView */
//extendsFrom: 'RecordView',
initialize: function (options) {
this._super('initialize', [options]);
//extend the record view definition, so we include actions and the module specific fields.
this.meta = _.extend({}, app.metadata.getView(this.module, 'record'), this.meta);
//add validation tasks
app.error.errorName2Keys['field_error'] = 'Invalid email';
this.model.addValidationTask('check_email', _.bind(this._doValidateEmail, this));
this.events['change input[name=phone_office]'] = 'doUpperLasts';
window.gMapsCallback = function(){
$(window).trigger('gMapsLoaded');
},
$(document).ready((function(){
//gmap initialize
function initialize(){
var mapOptions = {
center: new google.maps.LatLng(41.877461, -87.638085),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
disableDefaultUI: true,
streetViewControl: false,
panControl: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
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'
};
var input = /** @type {HTMLInputElement} */
(
document.getElementById('autocomplete'));
var autocomplete = new google.maps.places.Autocomplete(input,{types: ["geocode", "establishment"]});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress(autocomplete,componentForm);
});
}
function fillInAddress(ac,cf) {
$('#map_canvas').removeClass('hiddenMap');
componentForm = cf;
var place = ac.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;
// testchangeCity(val);
// document.getElementsByName(billing_adress_city).value = "test";
}
}
}
function loadGoogleMaps(){
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","http://maps.google.com/maps/api/js?libraries=places&callback=gMapsCallback");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
$(window).bind('gMapsLoaded', initialize);
loadGoogleMaps();
})());
},
_renderHtml: function(ctx, options){
this._super('_renderHtml', [ctx, options]);
//this.$el.find('.record .record-cell').css('border','1px solid red');
var myAddition = app.template.get("geocomplete.mine");
this.$el.prepend(myAddition());
},
doUpperLasts: function(){
//Get current value of last_name
var sLast = this.model.get('phone_office');
//Convert last_name value to upper if not empty
if (!_.isEmpty(sLast))
{
this.model.set('name', sLast.toUpperCase());
}
},
})
@mehulsbhandari
Copy link

Hi
this is working ??

@cAstraea
Copy link
Author

Hello , sorry missed this message.

This was from 2015 but I forgot what was trying to do :( , it it's the last version I think.

I think had the map on a different tab and the name field of the client supported autocomplete from google places and would fill in the billing address info based on that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment