American Butifarra

Shea Frederick has created a user-defined extension to integrate Google Maps with ExtJS. Here is an example:

var panwin = new Ext.Window({
	layout: 'fit',
	closeAction: 'hide',
	title: 'GPanorama Window',
	width:400,
	height:300,
	x: 480,
	y: 60,
        items: {
		xtype: 'gmappanel',
		gmapType: 'panorama',
		setCenter: {
			lat: 42.345573,
			'long': -71.098326
		}
	}
});

Results in a this ExtJS panel:

Configuration options:

It’s just as easy to create a Google map window that maps addresses and places markers at their locations (which could just as easily be nested in a layout instead).

A couple of the primary Google maps handlers and settings are setup as configuration options. For instance, ‘addControl’ allows adding of a standard Google map control (zoom, pan, etc) and the ‘zoomLevel’ sets a default zoom level for the map.

Geocoding can be used by substituting the lat/long configuration options with a ‘geoCodeAddr’ string.

The ’setCenter’ configuration allows the default center location of the map to be set, along with a marker. More markers can be added to the map using the ‘markers’ array.

Tags: Component, Ext JS, JavaScript, Library

Claude is as an application architect at Dow Jones. He also owns a freelance consulting practice that helps small business increase their productivity by improving their technology processes. Some of his colleagues think he should change his name to "Cloud."