Meteor Google Maps Autocomplete only works once on multiple templates - javascript

I am using a Google Places autocomplete package with Meteor and if I have the user select a location in one template, the autocomplete won't work again in a different template.
For instance, if the user picks an autocomplete location for an event they are hosting, and then they try to set their profile location in the profile settings, no autocomplete locations pop up.
In fact, if they even activate the autocomplete dropdown on one page (without even selecting one of the options), it won't work on the other page.
Here's my HTML:
<template name="userUpdate">
<script>
window.onload = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),{types: ['geocode'] }
);
};
</script>
<form class="main form" autocomplete="off">
<label class="control-label" for="location">Location</label>
<div class="controls">
<div id="locationField">
<input id="autocomplete" name="userLocation" class="form-control" autocomplete="off" placeholder="Where you live." type="text">
</div>
</div>
<p>
<h4 id="setLocation">{{currentUser.profile.location}}</h4>
<input id="updateUser" type="submit" class="btn btn-primary" value="Update Profile" />
</p>
</form>
</template>
Here is the second template:
<template name="postSubmit">
<form class="main form" autocomplete="off">
<div class="form-group">
<label class="control-label" for="title">Event Name</label>
<div class="controls">
<input name="title" id="title" type="text" value="" placeholder="Event name" class="form-control"/>
</div>
</div>
<div class="form-group">
<!--begin google test-->
<script>
window.onload = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocompleteEventPost')),{types: ['geocode'] }
);
};
</script>
<label class="control-label" for="location">Event Location</label>
<div class="controls">
<!--<input name="location" id="url" type="text" value="" placeholder="The location of the vent" class="form-control"/>-->
<div id="locationField">
<input id="autocompleteEventPost" name="location" autocomplete="off" placeholder="Event Location" type="text">
</div>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-primary"/>
</form>
</template>
I have the mrt:googlemaps package added, and I have set a googlePlaces.js like so:
GoogleMaps.init({
'sensor': true, //optional
'key': '***my api key***', //optional
'language': 'en', //optional
'libraries': 'places'
});
It is notable to state that although the autocomplete does not function again after a file update (with server restart), it will work again after a page refresh from the client.
Basically, I would like to see a perfect example of how to get this working in multiple templates in meteor.js.

The thing is with Google Maps is once you initialize, it only attaches itself on that current DOM instance. When you switch to another page/template, Gmaps seems to lose touch of those bindings you just created and you will have to reinitialize properly.
And you're using window.onload.. that only runs once..
Take a look at moving the <script> code found inside your templates to the rendered template event(s):
var initAutoComplete = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocompleteEventPost')),{types: ['geocode'] }
);
};
Template.userUpdate.rendered = initAutoComplete;
Template.postSubmit.rendered = initAutoComplete;
Make sure you get the timings right though.. GoogleMaps API is async after all and may even mess up with this kind of initialization. One thing you could do to avoid this is to wrap the above code in the GoogleMaps.init callback.

Electric Jesus' answer is the answer that worked, HOWEVER: A variable must be declared for each element that is going to use the Google Places Autocomplete API.
His solution:
var initAutoComplete = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocompleteEventPost')),{types: ['geocode'] }
);
};
Template.userUpdate.rendered = initAutoComplete;
Template.postSubmit.rendered = initAutoComplete;
There are two separate input fields, one on each template. So, there must be a variable for each input field you want the Places Autocomplete API to work on. I changed the input element ID's back to "autocomplete". Here's my solution. Note the one-to-one ratio of variables to input fields.
var initAutoComplete = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),{types: ['geocode'] }
);
};
var initAutoCompletePost = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),{types: ['geocode'] }
);
};
Template.userUpdate.rendered = initAutoComplete;
Template.postSubmit.rendered = initAutoCompletePost;
For others who use this solution, in my working implementation, I have removed the <script> tags from my HTML (there is no more javascript in my templates).

My guess is you should probably change it to class="autocomplete", id shouldn't have duplicate, so document.getElementById('autocomplete') will always return first element it finds. Never worked with google-maps tho, but I think this can be the reason

None of the other answers worked consistently for me so I'm calling initAutoComplete() when the text input is clicked and it works better for me.
Template.myTemplate.events({
'click #autocomplete': function(e,template) {
initAutoComplete();
}
});
var initAutoComplete = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),{types: ['geocode'] }
);
};
Edit: Not working so great it turns out though, getting this from time to time:
Uncaught TypeError: Cannot read property 'Autocomplete' of undefined

Related

Google Maps API - transparent pass through address components

I have a web-form with a text area where a user can type in an address. I need the form not only to store the formatted address (which is currently working) but also transparently pass through the address components for storing in a backend database.
The current code below predicts the possible addresses as the user types:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=*******************"></script>
*** snip ***
<script>
function init() {
var options = {
componentRestrictions: {
country: 'NZ'
}
};
var input = document.getElementById('streetAddress');
var autocomplete = new google.maps.places.Autocomplete(input, options); <-- autocomplete is never used?
}
google.maps.event.addDomListener(window, 'load', init);
</script>
*** snip ***
<div class="form-group">
<label for="streetAddress" class="col-sm-2 control-label">Location</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="streetAddress" placeholder="Street Address" name="location"/>
</div>
</div>
I am assuming I need to call a second google function - geocoder which after onClick which returns a geocoded address array from the address string in the function above.
I could then store its components in hidden html form input elements unless there is a better way.
Thymeleaf and spring-boot are being used to get the data into the backend.
The way I would do this is to add some elements to your page that are hidden to store and pass through the address.
The example below passes through the street number - you can expand it from there. The HTML & Thymeleaf:
<div class="form-group">
<label for="streetAddress" class="col-sm-2 control-label">Location</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="streetAddress" placeholder="Street Address" name="location" th:field="*{formattedAddress}" />
<input type="text" class="form-control hidden" id="streetnumber" th:field="*{streetNumber}" /> <!--hidden-->
</div>
Now the javascript:
var options = { componentRestrictions: { country: 'NZ' } };
var input = document.getElementById('streetAddress');
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.addListener('place_changed', function() {
console.log(autocomplete.getPlace());
var place = autocomplete.getPlace();
console.log(place.address_components[0].short_name);
var streetNumber = document.getElementById("streetnumber");
streetNumber.value = place.address_components[0].short_name;
});
Error handling needed.

Javascript assign value to HTML field

I am trying to save an HTML field (for later use in a form) from a JS script.
This is the code:
Form
<form class="new_client" id="new_client" action="/clients" accept-charset="UTF-8" method="post">
<div class="form-group">
<input class="form-input" type="hidden" name="client[city]" id="client_city">
</div>
<div class="form-group">
<input class="form-input" type="hidden" name="client[address]" id="client_address">
</div>
<div id="locationField">
<input autocomplete="off" class="autocomplete" placeholder="Enter your address" type="text">
</div>
<div class="text-center">
<button class="btn button-general ">Save</button>
</div>
</form>
And the javascript:
function configureGeoAutocomplete(context) {
if( context === undefined ) {
context = $('body');
}
var element = context.find('.autocomplete')
//It doesn't really matter what this line does, it's from Google Places API
var autocomplete = new google.maps.places.Autocomplete(
element[0], {types: ['geocode']});
autocomplete.addListener('place_changed', fillInAddress)
}
function fillInAddress() {
var client_address = autocomplete.getPlace().formatted_address;
document.getElementById("client_address").value = client_address;
}
The javascript is queried when loading the modal in which the form is
jQuery(function() {
$('div.modal').on('loaded.bs.modal', function(e) {
configureGeoAutocomplete(context);
}
}
I wanna save that client_address to the text field so when the form is submitted I can have that information.
Sounds like an excellent candidate for cookies if you are allowed to use them: http://www.w3schools.com/js/js_cookies.asp. Another idea is to pass it along in a Query String. It isn't PII or anything like that. Try an event code on that input. I do not like to hit "enter"!
onkeypress="if (event.keycode==13) { // do something }"
Handle the form submit event:
$(function() {
$("#new_client").submit(function(e) {
e.preventDefault();
// This is your value stored in the field.
$("#client_address").val();
});
})
Apparently, for some reason, if I searched the element by ID it was not saving the information on the field. If I istead search by class:
function fillInAddress() {
var place = autocomplete.getPlace();
$(".client-address").val(place.formatted_address);
}
It works as intended.

knockout validation - at least one field has a value and at least one checkbox checked

I'm trying to do some very simple validation using the knockout validation plugin. I want to validate if at least one text field has text and at least one checkbox is checked. All bindings work correctly and knockout itself is awesome so far. I've tested native validation rules and they work with messaging. I just can't get the validation to work for these 2 rules.
I realize I can check for empty values very easily with jQuery but I would really like to utilize knockout.
The model (without validation because I haven't found anything that works yet):
var SearchForm = function(collections) {
// main search fields
this.fullRecord = ko.observable();
this.title = ko.observable();
this.author = ko.observable();
// collections to search
var sources = [];
$.each(collections, function(index,collection) {
sources.push(new Source(collection));
});
this.sources = ko.observableArray(sources);
// Error handling vars
this.errors = ko.validation.group(this);
};
var Source = function(collection) {
$.extend(this,collection);
this.id = "collection-"+this.code;
this.selected = ko.observable(true);
};
Here I'm just creating a list of source objects from collection data that comes from the server. That data is irrelevant since I'm only concerned with the observable 'selected' property.
The markup:
<div id="advanced-controls" class="row">
<div class="col-sm-8">
<fieldset id="search-fields">
<div class="form-group">
<label for="fullrecord" class="control-label">Keywords:</label>
<input type="text" id="fullrecord" class="form-control" name="fullrecord" placeholder="Full Record Search" data-bind="value:fullRecord" />
</div>
<div class="form-group">
<label for="title" class="control-label">Title:</label>
<input type="text" id="title" name="title" class="form-control" data-bind="value:title"/>
</div>
<div class="form-group">
<label for="author" class="control-label">Author:</label>
<input type="text" id="author" name="author" class="form-control" data-bind="value:author"/>
</div>
<div class="form-group">
<button id="advanced-search-submit" class="btn btn-primary" data-bind="click:search">Search</button>
<button id="advanced-search-reset" class="btn" data-bind="click: clear">Clear All</button>
</div>
</fieldset>
</div>
<div class="col-sm-4">
<fieldset data-bind="foreach: sources">
<div class="form-group">
<input type="checkbox" name="collections" data-bind="attr:{ id:id, value:code }, checked:selected, click: $parent.clearRequiredSourceError ">
<label data-bind="attr:{ for:id }, text: name"></label>
</div>
</fieldset>
</div>
</div>
In the validation function before submitting:
// If there's any knockout validation errors
if (model.errors().length > 0) {
model.errors.showAllMessages();
isValid = false;
}
I've tried setting a custom validation extension on the observable array of sources like this:
this.sources = ko.observableArray(sources).extend({
validation: {
validator : function (sources) {
var anySelected = false;
$(sources).each(function(){
anySelected = this.selected();
});
return anySelected;
},
message: 'At least one source is required to search.'
}
});
But that doesn't fire when the checkboxes are clicked, only when the array is changed ~ push, pop, etc. Yes I have the config set correctly:
ko.validation.configure({
grouping: {
deep: true,
observable: true
}
});
This seems like it should be very simple to achieve. Maybe my brain is just fried from diving into the whole knockout world this week. Any suggestions are greatly appreciated. Thanks in advance!
Forgive me for not reading your entire question, as it is very long, but I am curious if you need Knockout validation for this or if you are looking for something like this -
var selectedOption = ko.observable();
var selectionsOk = ko.computed(function () {
((!!field1()|| !!field1()|| !!field1())&&!!selectedOption())
});
Where selectedOption is a list of radio buttons, and once one is selected returns the value, and you could either use an observableArray to contain each of your fields so it is dynamic or you list the fields out and make sure that at least one of them has a value. The !! will evaluate your observable as true or false, true would be returned unless the observables' value was null, undefined, '', or false
The selectionOk computed could be used to prevent clicking some button to proceed or inversely for displaying an error message until the conditions are met.

How to only trigger a JavaScript function without the controller handling the request in NET MVC 3 Razor

I am struggling with something that I'm not even sure if possible.
I have a typical form page in an .NET MVC 3 Razor project. Within this page is a Google map with a search mechanism. The search is wrapped with a form that calls a JavaScript function to update the map if a location is found.
When I try to use it, the view's controller handles the request and the controller's model state is not valid (as the user hasn't finished with the rest of the form yet). The result is a representation of the page which resets the map (totally the opposite of what I'm after).
Here's a simplified version of the view:
#model OnlineEventReporting.ViewModels.ReportShortViewData
#{
Layout = "~/Views/Shared/_LayoutGoogleMap_with_all_js_code.cshtml";
}
<script type="text/javascript">
function showAddress(address) { [processing code] }
</script>
#using (Html.BeginForm("Index", "ShortReport", FormMethod.Post, new { name = "shortForm", id = "shortForm", data_ajax = "false" }))
{
#Html.ValidationSummary(true)
Info for the controller to handle:
#Html.TextBoxFor(model => model.AddressDetail.Street1, new { #maxlength = "50" })
<!-- I want this to 'fire' the JavaScript 'showAddress' function and for the controller to ignore it -->
<form style="text-align:center" action="#" onsubmit="showAddress(this.address.value); return false">
<input type="text" size="20" id="address" name="address" value="North Street, Guildford" />
<input type="submit" value="Search!" />
</form>
<div id="map" style="width: 100%; height: 400px; margin-left:20px;"></div>
More info for the controller to handle:
#Html.TextBoxFor(model => model.AddressDetail.Street2, new { #maxlength = "50" })
}
I realise I have a form within a form here but I'm not how else I could approach this as I need the map and search feature right in the middle of my main form.
Any help would be greatly appreciated.
Many thanks,
Chris.
Your code would produce invalid HTML - nested forms are not valid HTML.
The problem is that the input type="submit" probably causes the topmost form to submit instead of what you expect.
Why not have a normal button and attach the function to the click event?
What you are looking for is an AJAX request. Your controller will still handle the request. However, it will do it asynchronously, without a complete postback.
First of all, get rid of the nested form tag, you don't need it. Instead, try this:
Info for the controller to handle:
#Html.TextBoxFor(model => model.AddressDetail.Street1, new { #maxlength = "50" })
<!-- I want this to 'fire' the JavaScript 'showAddress' function and for the controller to ignore it -->
<input type="text" size="20" id="address" name="address" value="North Street, Guildford" />
<input type="submit" value="Search!" onclick="showAddress(this.address.value); return false;" />
<div id="map" style="width: 100%; height: 400px; margin-left:20px;"></div>

How to make an autocomplete address field with google maps api?

Using Google Maps API and JQuery I would like to have an Address field that when typing it will autocomplete the address entered there. How this could be achieved?
Well, better late than never. Google maps API v3 now provides address autocompletion.
API docs are here: http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete
A good example is here:
http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html
It is easy, but the Google API examples give you detailed explanation with how you can get the map to display the entered location. For only autocomplete feature, you can do something like this.
First, enable Google Places API Web Service. Get the API key. You will have to use it in the script tag in html file.
<input type="text" id="location">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY_HERE]&libraries=places"></script>
<script src="javascripts/scripts.js"></scripts>
Use script file to load the autocomplete class. Your scripts.js file will look something like this.
// scripts.js custom js file
$(document).ready(function () {
google.maps.event.addDomListener(window, 'load', initialize);
});
function initialize() {
var input = document.getElementById('location');
var autocomplete = new google.maps.places.Autocomplete(input);
}
Below I split all the details of formatted address like City, State, Country and Zip code.
So when you start typing your street name and select any option then street name write over street field, city name write over city field and all other fields like state, country and zip code will fill automatically.
Using Google APIs.
------------------------------------------------
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var places = new google.maps.places.Autocomplete(document
.getElementById('txtPlaces'));
google.maps.event.addListener(places, 'place_changed', function() {
var place = places.getPlace();
var address = place.formatted_address;
var value = address.split(",");
count=value.length;
country=value[count-1];
state=value[count-2];
city=value[count-3];
var z=state.split(" ");
document.getElementById("selCountry").text = country;
var i =z.length;
document.getElementById("pstate").value = z[1];
if(i>2)
document.getElementById("pzcode").value = z[2];
document.getElementById("pCity").value = city;
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
var mesg = address;
document.getElementById("txtPlaces").value = mesg;
var lati = latitude;
document.getElementById("plati").value = lati;
var longi = longitude;
document.getElementById("plongi").value = longi;
});
});
Like others have mentioned, the Google Places Autocomplete API is missing some important functions. Case in point, Google will not validate that the street number is real, and they also will not put it into a standardized format. So, it is the user's responsibility to enter that portion of the address correctly.
Google also won't predict PO Boxes or apartment numbers. So, if you are using their API for shipping, address cleansing or data governance, you may want one that will validate the building number, autocomplete the unit number and standardize the information.
Full Disclosure, I work for SmartyStreets
Drifting a bit, but it would be relatively easy to autofill the US City/State or CA City/Provence when the user enters her postal code using a lookup table.
Here's how you could do it if you could force people to bend to your will:
User enters: postal (zip) code
You fill: state, city (province, for Canada)
User starts to enter: streetname
You: autofill
You display: a range of allowed address numbers
User: enters the number
Done.
Here's how it is natural for people to do it:
User enters: address number
You: do nothing
User starts to enter: street name
You: autofill, drawing from a massive list of every street in the country
User enters: city
You: autofill
User enters: state/provence
You: is it worth autofilling a few chars?
You: autofill postal (zip) code, if you can (because some codes straddle cities).
Now you know why people charge $$$ to do this. :)
For the street address, consider there are two parts: numeric and streetname. If you have the zip code, then you can narrow down the available streets, but most people enter the numeric part first, which is backwa
I really doubt it--google maps API is great for geocoding known addresses, but it generally return data that is suitable for autocomplete-style operations. Nevermind the challenge of not hitting the API in such a way as to eat up your geocoding query limit very quickly.
Youtube video reference: https://youtu.be/WxH0J4wOnZA
HTML
<input type="text" name="myAddress" placeholder="Enter your address" value="333 Alberta Place, Prince Rupert, BC, Canada" id="myAddress"/>
Google Autofill address
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=[YOUR-KEY]"></script>
<script type="text/javascript">
var searchInput = 'myAddress';
$(document).ready(function () {
var autocomplete;
autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), {
types: ['geocode']
});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var near_place = autocomplete.getPlace();
});
});
</script>
There are some awesome libraries such as select2, but it doesn't match my need.
I've made a sample from scratch in order to use a simple input text.
I only use bootstrap and JQuery, Hope it'll be useful: Example
HTML:
<div class="form-group col-md-12">
<label for="address">Address</label>
<input type="text" class="form-control" id="address">
</div>
<div class="form-group">
<div class="col-md-4">
<label for="number">number</label>
<input type="text" class="form-control" id="number">
</div>
<div class="col-md-8">
<label for="street">street</label>
<input type="text" class="form-control" id="street">
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="zip">zip</label>
<input type="text" class="form-control" id="zip">
</div>
<div class="col-md-8">
<label for="town">town</label>
<input type="text" class="form-control" id="town">
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="department">Department</label>
<input type="text" class="form-control" id="department">
</div>
<div class="col-md-4">
<label for="region">Region</label>
<input type="text" class="form-control" id="region">
</div>
<div class="col-md-4">
<label for="country">Country</label>
<input type="text" class="form-control" id="country">
</div>
</div>
JS:
$("input#address").suggest({
label : "Adresse complete",
street_number_input : {
id : "number",
label : "Numero de la rue"
},
street_name_input : {
id : "street",
label : "Nom de la rue"
},
zip_input : {
id : "zip",
label : "Code postal"
},
town_input : {
id : "town",
label : "Ville"
},
department_input : {
id : "department",
label : "Departement"
},
region_input : {
id : "region",
label : "Region"
},
country_input : {
id : "country",
label : "Pays"
}
});

Categories