Google Maps Component for Ext-JS

Shea Frederick has created a user-defined extension to integrate Google Maps with ExtJS.

UPDATE: I’ve created a tutorial that uses the latest version of the extension and Ext-JS.

Ext.ns('Sample');
Sample.ExtGMap = function() {

	var el = 'ext-map';

	function _init() {

		new Ext.Panel({
			renderTo: el,
			layout: 'fit',
			height: 300,
			hideLabel: true,
			items: [
		        {
		        	xtype: 'gmappanel',
		        	gmapType: 'map',
		        	zoomLevel: 14,
		            setCenter: {
		        		lat: 40.782686,
		        		lng: -73.96524,
			            marker: {
		        			title: 'Central Park'
			            }
			        }
		        }
			]
		});

	}

	return {
		init: _init
	}

}();
Ext.onReady(Sample.ExtGMap.init, Sample.ExtGMap);

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.

Tagged as: Component, Ext JS, GoogleMaps, JavaScript, Library, Map, Sencha