Ext.ux.GMapPanel Sample

Ext-based GMapPanel

This sample creates an Ext.Panel, hides its title and sets an item of the type gmappanel.

What you will need

• Make sure to download a copy of the latest version of Sencha (Ext-JS). For this demo we're using version 3.2.1.
• Download the latest version of this extension from Google Code. For this demo we're using version .
• Learn the basics about the GoogleMaps API.

Sample Ext.ux.GMapPanel

Include the Libraries

Typically JavaScript libraries should be loaded at the bottom of the page to improve the perceived speed of the site. I usually include them immediately before the closing body tag.

<div id="ext-map"></div> ... <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="/ext/3.2.1/adapter/ext/ext-base.js"></script> <script src="/ext/3.2.1/ext-all.js"></script> <script src="/ext/ux/Ext.ux.GMapPanel3.js"></script> <script src="myCustomCode.js"></script>

Make sure to include the Google Maps API and Ext-JS before the user extension. Finally, include your custom code file.

Custom Code

// More info at http://code.google.com/p/ext-ux-gmappanel/ 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);

Got a question? Ask it here.