Tuesday, February 9, 2010
 

Google Maps Component for Ext-JS

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: , , ,

Related Posts

Comments

No comments so far.
  • Leave a Reply
     
    Your gravatar
    Your Name
     
     
     
     
     
 
About Me

I work as an application architect at Dow Jones & Company, the parent company of The Wall Street Journal, Dow Jones Indexes and Marketwatch.com.

On my time *off* I do freelance work for small businesses. I also like to tinker with electronics and have recently taken up photography and competitive shooting.

Learn more »
Focus

Front-end engineering. Full cycle application architecture and development of Internet based systems including conceptualization, logical modeling, physical design, development and implementation.

Specialties

Ajax, JavaScript, Ext-JS, jQuery, UX, CFML, PHP, CodeIgniter, C#, WordPress customization

Get in touch

Phone: +1 732 391 1122
Email: consulting@betancourt.us