View:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
config: {
layout: {
type: 'hbox'
},
items: [
{
xtype: 'list',
itemId: 'list',
width: '200px',
itemTpl: [
'
{name}
'
],
store: 'MyJsonStore'
},
{
xtype: 'map',
flex: 1,
itemId: 'googleMap',
width: 300,
mapOptions: {
disableDefaultUI: true,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}
],
listeners: [
{
fn: 'onListSelect',
event: 'select',
delegate: '#list'
}
]
},
onListSelect: function(dataview, record, eOpts) {
var me = this;
var googleMap = me.down('#googleMap');
console.log('name = '+ record.get('name')+' ; address = '+ record.get('address'));
if (record){
var address = record.get('address');
// Geodecode
var geocoder = new window.google.maps.Geocoder();
var map = googleMap;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == window.google.maps.GeocoderStatus.OK) {
setTimeout(function () {
map.getMap().setCenter(new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()));
var marker = new google.maps.Marker({
map: map.getMap(),
position: results[0].geometry.location
});
//map.markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: address,
maxWidth: 120
});
infowindow.open(map.getMap(), marker);
}, 500);
} else {
console.log('Geocode was not successful for the following reason: ' + status);
}
});
}
}
});
Store
Ext.define('MyApp.store.UniversityStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.University'
],
config: {
autoLoad: true,
autoSync: true,
model: 'MyApp.model.University',
storeId: 'MyJsonStore',
proxy: {
type: 'ajax',
url: 'university.json',
reader: {
type: 'json'
}
}
}
});
Model:
Ext.define('MyApp.model.University', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'name'
},
{
name: 'address'
}
]
}
});
Data:
[
{
"name":"New York University",
"address":"70 Washington Square S New York, NY 10012"
}
,
{
"name":"University of Zurich",
"address":"Rämistrasse 71 8006 Zürich Switzerland"
},
{
"name":"Yale University",
"address":"New Haven, CT 06520"
},
{
"name":"Hanoi University of Science and Technology",
"address":"Số 1 Đại Cồ Việt Bách Khoa, Hai Bà Trưng Hà Nội, Vietnam"
},
{
"name":"Trường Đại Học Bách Khoa Đà Nẵng",
"address":"54 Nguyễn Lương Bằng Hòa Khánh Bắc, Liên Chiểu Đà Nẵng, Vietnam"
},
{
"name":"Trường Đại học Bách khoa tp Hồ Chí Minh",
"address":"268 Lý Thường Kiệt phường 14, Quận 10 Hồ Chí Minh, Vietnam"
}
]
Add listener when click
var me = this;
var googleMap = me.down('#googleMap');
console.log('name = '+ record.get('name')+' ; address = '+ record.get('address'));
if (record){
var address = record.get('address');
// Geodecode
var geocoder = new window.google.maps.Geocoder();
var map = googleMap;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == window.google.maps.GeocoderStatus.OK) {
setTimeout(function () {
map.getMap().setCenter(new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()));
var marker = new google.maps.Marker({
map: map.getMap(),
position: results[0].geometry.location
});
//map.markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: address,
maxWidth: 120
});
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infowindow.open(map.getMap(), marker);
}
})(marker));
}, 500);
} else {
console.log('Geocode was not successful for the following reason: ' + status);
}
});
}
