This will center the map on Apple Computer, Inc. headquarters and also drop a pin with a title that will show on hover.
app.js
Code:
Ext.application({
name: 'test',
views: ['Locations'],
launch: function() {
Ext.create('test.view.Locations');
}
});
Locations.js
Code:
Ext.define('test.view.Locations', {
extend: 'Ext.Panel',
config: {
layout: 'fit',
fullscreen: true,
items: [
{
xtype: 'map',
mapOptions: {
center: new google.maps.LatLng(37.332495,-122.03056),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
listeners: {
maprender: function(extMapComonent, googleMapComponent) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.332495,-122.03056),
title: 'Apple Computer, Inc.',
map: googleMapComponent,
animation: google.maps.Animation.DROP,
});
}
}
}
]
}
});
In HTML file's <head> section:
Code:
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>