multiple source autocomplete textbox in jquery

Question

i have done multiple autocomplete, in this two field cafelist and citylist, my requirement is citylist get in google map api autocomplete placeholder, i have complete autocomplete city and cafe in database but city is get in google map api 

Code here:

function multipletypeahead() {

var data = [];

for (var i = 0; i < cafelist.length; i++) {

var odata = {

name: cafelist[i].name

};

data.push(odata);

}

var datacity = [];

for (var j = 0; j < citylist.length; j++) {

var datacitylist = {

address: citylist[j].name

};

datacity.push(datacitylist);

}

var cafe = new Bloodhound({

datumTokenizer: function(data) {

return Bloodhound.tokenizers.whitespace(data.name);

},

queryTokenizer: Bloodhound.tokenizers.whitespace,

local: data

});

var city = new Bloodhound({

datumTokenizer: function(datacity) {

return Bloodhound.tokenizers.whitespace(datacity.address);

},

queryTokenizer: Bloodhound.tokenizers.whitespace,

local: datacity

});

cafe.initialize();

city.initialize();

$('#txtloc').typeahead({

highlight: true

}, {

name: 'cafe',

displayKey: 'name',

source: cafe.ttAdapter(),

templates: {

header: '<h3 class="league-name">Cafe</h3>'

}

}, {

name: 'city',

displayKey: 'address',

source: city.ttAdapter(),

templates: {

header: '<h3 class="league-name">City</h3>' +

google.maps.event.addDomListener(window, 'load', function () {

var places = new google.maps.places.Autocomplete(document.getElementById('txtloc'));

//google.maps.event.addListener(places, 'place_changed', function () {

//});

})

}

});

};