I'm working on a project where I'm searching locations using Google Maps API v3 places (with auto complete service).
It works nicely and allows you to search from many different countries, how ever I was hoping to add some custom results (e.g. "Mikes place") to the result pane as well (if someone started typing "Mike").
Is it possible to add my own results to the Google Maps places search results or should I use some jQuery auto complete feature and try to add Google results with my own?
It's probably a bit late for you but I stumbled across your question before deciding to implement this myself in a Google Maps Autocomplete component for Angular JS which I maintain. Hopefully someone finds it helpful.
Using the component you can specify custom places results which get blended into the results that come back from the AutocompleteService.
Here's a working example:
<!DOCTYPE html>
<html lang="en" ng-app="example">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Injecting Custom Place Predictions</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="../src/autocomplete.css">
<!-- Required dependencies -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="lib/underscore/underscore.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-touch/angular-touch.js"></script>
<!-- Google Places Autocomplete directive -->
<script src="../src/autocomplete.js"></script>
<script>
angular.module('example', ['google.places'])
// Setup a basic controller
.controller('MainCtrl', function ($scope) {
$scope.place = null;
$scope.myPlaces = [
toGooglePlacesResult({
label: 'International Airport - T1, Sydney, New South Wales',
address: {
street: 'International Airport - T1',
suburb: 'Sydney',
state: 'NSW'
},
location: { latitude: -33.936722, longitude: 151.164266 }
}),
toGooglePlacesResult({
label: 'Domestic Airport - T2, Sydney, New South Wales',
address: {
street: 'Domestic Airport - T2',
suburb: 'Sydney',
state: 'NSW'
},
location: { latitude: -33.933617, longitude: 151.181630 }
}),
toGooglePlacesResult({
label: 'Domestic Airport - T3, Sydney, New South Wales',
address: {
street: 'Domestic Airport - T3',
suburb: 'Sydney',
state: 'NSW'
},
location: { latitude: -33.933076, longitude: 151.181270 }
})
];
function toGooglePlacesResult(config) {
return {
formatted_address: config.label,
address_components: [
{
long_name: config.address.street,
short_name : config.address.street,
types: [ 'route' ]
},
{
long_name: config.address.suburb,
short_name: config.address.suburb,
types: [ 'locality' ]
},
{
long_name: config.address.state,
short_name: config.address.state,
types: [ 'administrative_area_level_1' ]
}
],
geometry: {
location: {
lat: function () { return config.location.latitude },
lng: function () { return config.location.longitude }
}
}
};
}
});
</script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Injecting Custom Place Predictions</h1>
<form class="form">
<input class="form-control" g-places-autocomplete custom-places="myPlaces" ng-model="place"/>
</form>
<h5>Result:</h5>
<pre>{{place | json}}</pre>
</div>
</div>
</div>
</body>
</html>
The important parts are making sure your custom places results actually look minimally like a real places result, then wiring up your results to the directive using the custom-places attribute.
Related
I am using bootstrap table to display some data in my web application. https://bootstrap-table.com/ and I want to put an export feature in. The docs say to use https://github.com/hhurz/tableExport.jquery.plugin so I have added this to my imports and made the necessary code changes. Within the docs for this it says you can specify a format for the cells you are exporting by applying optional html data attributes while generating the table but how do I do this if my table is generated using bootstrap-table. I can't seem to work it out.. I basically need to the html data attribute data-tableexport-msonumberformat="0" to a set of td's generated by my bootstrap-table javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/webjars/bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/webjars/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script type="text/javascript" src="/webjars/bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href="/webjars/bootstrap-table/1.16.0/bootstrap-table.css" rel="stylesheet"></script>
</head>
<body class="bg-light">
<button id="exportExcelBtn" class="btn btn-sm btn-success" type="button">
Export
</button>
<table id="table"></table>
<script src="/webjars/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
<script src="/webjars/bootstrap-table/1.16.0/extensions/export/bootstrap-table-export.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('#exportExcelBtn').on('click', function () {
$('#table').tableExport({
type: 'excel',
fileName: "Order Summary"
});
});
$('#table').bootstrapTable({
url: '/getTableData',
columns: [
{
field: 'orderNo',
title: 'Order No',
sortable: true
},
{
field: 'itemNo',
title: 'Item No',
sortable: true,
**tableExport: {msoNumberFormat: '0'}**
}
})
});
</script>
</body>
</html>
https://github.com/himingby/tableExport.jquery.plugin/blob/master/test/index.html
could you try this below?
<script type="text/javascript">
function DoOnMsoNumberFormat(cell, row, col) {
var result = "";
if (row > 0 && col === 0)
result = "\\#";
else if (row > 0 && col === 2)
result = "0"; // #issue 327: Preserve long numbers
return result;
};
$( document ).ready(function() {
$('#exportExcelBtn').on('click', function () {
$('#table').tableExport({
type: 'excel',
fileName: "Order Summary"，
mso:{onMsoNumberFormat: DoOnMsoNumberFormat},
});
});
$('#table').bootstrapTable({
url: '/getTableData',
columns: [
{
field: 'orderNo',
title: 'Order No',
sortable: true
},
{
field: 'itemNo',
title: 'Item No',
sortable: true
}
})
});
This only displays barebones html rows and columns but obviously I need dgrids rows and columns. This is the exact code from dgrids hello world tutorial.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello dgrid!</title>
</head>
<body>
<div id="grid"></div>
<!-- this configuration assumes that the dgrid package is located
in the filesystem as a sibling to the dojo package -->
<script src="/Users/theUser/node_modules/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([ 'dgrid/Grid', 'dojo/domReady!' ], function (Grid) {
var data = [
{ first: 'Bob', last: 'Barker', age: 89 },
{ first: 'Vanna', last: 'White', age: 55 },
{ first: 'Pat', last: 'Sajak', age: 65 }
];
var grid = new Grid({
columns: {
first: 'First Name',
last: 'Last Name',
age: 'Age'
}
}, 'grid');
grid.renderArray(data);
});
</script>
</body>
</html>
The code above is missing line 6 from the tutorial:
<link rel="stylesheet" href="path/to/dgrid/css/dgrid.css">
I have an edited code of google API. It is not working on the page on wordpress. I have entered the code in text box but it shows a blank page
#Greg Burkett
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Province', 'popularity'],
['Federally Administered Tribal Areas',100],
['Islamabad',1000],
['Punjab',800],
['PK-KP',500], // North West Frontier
['Azad Kashmir',300],
['PK-GB',150], // Northern Areas
['Baluchistan',600],
['Sind',100]
]);
var options = {
region: 'PK',
backgroundColor: '#81d4fa',
datalessRegionColor: 'white',
width: 1170,
height: 695,
resolution: 'provinces',
colors: ['#FC0000','#FF3333','#FFFF00','#00FF00','#0CFF0C']
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 800px; height: 800px;"></div>
</body>
</html>
With the latest stable version of Handlebar, I'm trying to display the site name while iterating through each children. The output of the code below is:
5
Stackoverflow
One -
Two -
Can handlebars retrieve the site name by walking up while rendering the children?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="handlebars.js"></script>
<script>
$(document).ready(function() {
var source = $('#entry-template').html();
var template = Handlebars.compile(source);
var context = {
site: {
age: 5,
name: 'Stackoverflow',
children: [
{
name: 'One'
},
{
name: 'Two'
}
]
}
};
$('div#output').html(template(context));
});
</script>
</head>
<body>
<div id="output"></div>
<script id="entry-template" type="text/x-handlebars-template">
<div>{{site.age}}</div>
<div>{{site.name}}</div>
{{#each site.children}}
<div>{{name}} - {{site.name}}</div>
{{/each}}
</script>
</body>
</html>
Try doing {{../site.name}} in your loop. The ../ Handlebars syntax allows access of the parent scope.
I'm trying to run the treegrid example but it only gives me the grid with no data in it!
this is my default.aspx:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My tree grid</title>
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ExtJs4/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJs4/bootstrap.js"></script>
<script type="text/javascript" src="ExtJs4/ext-all.js"></script>
<!-- example code -->
<script type="text/javascript" src="Scripts/treepanel.js"></script>
</head>
<body>
<h1>My tree grid</h1>
<div id="tree-div"> </div>
this is my treepanel.js
Ext.Loader.setConfig({ enabled: true }); //
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.tip.QuickTipManager',
'Ext.container.Viewport',
'Ext.layout.*',
'Ext.form.Panel',
'Ext.form.Label',
'Ext.grid.*',
'Ext.data.*',
'Ext.tree.*',
'Ext.selection.*',
'Ext.tab.Panel'
]);
Ext.onReady(function ()
{
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'}
]
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
url: 'treegrid.json'////
},
folderSort: true
});
//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: 'tree-div',
rootVisible:true,
store: store,
autoload:true,
columns: [{xtype: 'treecolumn', text: 'Task', dataIndex: 'task' },{text: 'Assigned To', dataIndex: 'user'}]
});
});
am I doing something wrong here?
I have no error msg from my firebug...so why isn't it working?
if I can't run an example how am I going to do more..I'm frustrated with this.
not sure, but the "autoLoad: true" is now on the panel, but shouldn't it be on the store?
Install PHP and do the following in IIS:
click on the new site
click on MIME types
right click in open space > Add > File name extension: "json" ... MIME Type: "application/x-javascript"
Adding more details:
http://www.sencha.com/forum/showthread.php?33266-Some-Problem-with-JSON&p=229858&viewfull=1#post229858