async request from google maps api - unable to process binding error
Question
I am creating a map using google maps api. JavaScript and knockout.js are used for the coding. whenever i try to load google map api script asynchonously by adding async :
<script src async ="https://maps.googleapis.com/maps/api/js?v3.exp"></script>
OR
<script async src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=googleSuccess" onerror="googleError()">
</script>
i get this error enter image description here
The error says: Uncaught ReferenceError: Unable to process binding "value: function (){return pointFilter }" Message: pointFilter is not defined But I have defined the pointFilter observable.
if i remove async from the request then the page runs normally. How can i remove this error or is there any other way to do this. These are my files index.html and the main.js
I can't include the full code because of the word limit.
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <!
[endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>New Delhi</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS links-->
<link rel="stylesheet" href="css/main.css">
<!-- JS links -->
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<link rel="shortcut icon" href="favicon.ico" />
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-
1.11.2.min.js">\x3C/script>')
</script>
<!-- google maps api call-->
<script src async ="https://maps.googleapis.com/maps/api/js?v3.exp">
</script>
<script src="js/vendor/knockout-3.2.0.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!--the map element will be used here and fill 100% of the screen-->
<div id="map"></div>
<!--this holds our entire listbox and search it will be added to map
controls-->
<div id="searchui">
<!--is the checkbox options above the filter/search box-->
<div id="searchOptions" >
<label class="optionCheck"><input type="checkbox"
id="refitFilterCheck" data-bind="checked: refitFilterCheck"><span>refit
map on filter?</span></label>
<label class="optionCheck"><input type="checkbox"
id="refitResizeCheck" data-bind="checked: refitResizeCheck"><span>refit
map on window resize?</span></label>
<label class="optionCheck"><input type="checkbox"
id="searchCategoryCheck" data-bind="checked: searchCategoryCheck">
<span>search name only?</span></label>
</div>
<!--this is the filter/search box-->
<input id="searchbox" type="search" placeholder="Search Here" data-
bind="value: pointFilter, valueUpdate: 'keyup'" autocomplete="off">
<!--this is the points list-->
<ul id="pointList" data-bind="visible: listVisible, template: {name:
'pointsTemplate',foreach: shownList}">
</ul>
<!--this is the list controls such as next page and collaps-->
<div id="listControls">
<div id="pageControls" data-bind="display: listVisible">
<div id="prevPage" data-bind="click:
changePage.bind($data,-1)">
<strong data-bind="text: prevPageText"></strong>
</div>
<div id="pageNumText" data-bind="html: pageText"></div>
<div id="nextPage" data-bind="click:
changePage.bind($data,1)">
<strong data-bind="text: nextPageText"></strong>
</div>
</div>
<div id="listRollup" data-bind="click: toggleList">
<img id="rollupImg" data-bind="attr:{src: rollupIconPath,
alt: rollupText}" />
</div>
</div>
</div>
<!--this is a knockout template used for point list items-->
<script type="text/html" id="pointsTemplate">
<li data-bind="event: {mouseover: $parent.mouseHere, mouseleave:
$parent.mouseGone}, click:$parent.selectPoint, css:
$parent.getStyle($data)">
<strong data-bind="text: name"></strong>
</li>
</script>
</body>
</html>
main.js
var TheMap = function(){
this.Zoom = 10;
this.mapOptions = {
zoom: this.Zoom,
panControl: false,
disableDefaultUI: true,
center: new google.maps.LatLng(28.6562,77.2410),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map =
new google.maps.Map(document.getElementById('map'), this.mapOptions);
};
var viewModel = function(){
/* scope alias */
var self = this;
/* clear session storage any time we load */
sessionStorage.clear();
/* how many items to show in filtered list max? */
/* sets based on window height to always fit a clean amount (min 1) */
self.maxListNum =
ko.observable(Math.max(1,Math.ceil(($(window).height() -150)/30)));
//is the list visible right now? 1 = on, 0 = false;
self.listVisible = ko.observable(1);
/* which point is the first one on our list page right now?
* actual page is calculated from this. Storing point instead
* of page so that point can remain consistent when list resizes
*/
self.listPoint = ko.observable(1);
/* make sure the google map api loaded before we do any work */
if (typeof google !== 'object' || typeof google.maps !== 'object'){
console.log("error loading google maps api");
$('#searchbox').val("Error Loading Google Maps Api");
$('#searchbox').css({'background-color' : 'rgba(255,0,0,0.3)'});
//return early since we have no maps. No point in doing much else.
return;
}
pointFilter Declaration:
self.pointFilter = ko.observable('');
/* calculated array containing just the filtered results from points()*/
self.shownPoints = ko.computed(function() {
return ko.utils.arrayFilter(self.points(), function(point) {
return (self.pointFilter() === '*' ||
point.name.toLowerCase().indexOf(self.pointFilter().
toLowerCase()) !== -1);
});
}, self);
1 answers
solution1
0 2017-09-02 10:46:30
You probably have a problem with your api key. You may create an api key with google and the replace in your code YOU_API_KEY by the key you just created.
However, if you already have a key you probably have an error with your callbacks functions. I can not help you for this point because you do not display your callbacks functions. If you have an api key please display the callbacks functions.
Tell me if you have some questions.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.