Ext 4.2 - Very Simple (Stupid) Gmap - Marker and InfoWindow
HTML
<script src="http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZx1jmE9yB533ED9suD13buyd0pEfmTzI&sensor=false&dummy=.js"></script>
<script src="http://www.msg360.co.uk/emails/sample/Scripts/infobubble-compiled.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
CSS
.x-border-box .reset-box-sizing * {
box-sizing: content-box;
}
JavaScript
Ext.onReady(function() {
var w = Ext.create('Ext.window.Window', {
title: 'Gmap',
height: 400,
width: 600,
layout: 'border',
items: [
{
title: 'Message List',
region: 'south',
height: 50,
split: true,
collapsible: true,
margins: '0 5 5 5',
collapsed: true
},{
region: 'west',
title: 'Tree',
collapsible: true,
width: 100,
items: [
{
xtype: 'button',
text: 'add',
handler: addInfoWindow // reference to event handler function
}]
},{
xtype: 'gmappanel',
region: 'center',
cls: 'reset-box-sizing',
center: new google.maps.LatLng(53.5267, -1.13330),
mapOptions: {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}
]
});
/**
* Just example, do not write code like this!
* GMApPanel source code
* http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js
*/
// get the map reference
var map = w.down('gmappanel');
function openInfoWindow(content, marker) {
// create a info window
var infowindow = new google.maps.InfoWindow({
content: content,
size: new google.maps.Size(50,50)
});
infoBubble = new InfoBubble({
content: '<div class="example">Some label</div>',
//position: new google.maps.LatLng(53.5267, newlong),
shadowStyle: 1,
padding: 10,
borderRadius: 5,
minWidth:...