123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-ux-GMapPanel'>/**
- </span> * @class Ext.ux.GMapPanel
- * @extends Ext.Panel
- * @author Shea Frederick
- */
- Ext.define('Ext.ux.GMapPanel', {
- extend: 'Ext.panel.Panel',
-
- alias: 'widget.gmappanel',
-
- requires: ['Ext.window.MessageBox'],
-
- initComponent : function(){
- Ext.applyIf(this,{
- plain: true,
- gmapType: 'map',
- border: false
- });
-
- this.callParent();
- },
-
- afterFirstLayout : function(){
- var center = this.center;
- this.callParent();
-
- if (center) {
- if (center.geoCodeAddr) {
- this.lookupCode(center.geoCodeAddr, center.marker);
- } else {
- this.createMap(center);
- }
- } else {
- Ext.Error.raise('center is required');
- }
-
- },
-
- createMap: function(center, marker) {
- options = Ext.apply({}, this.mapOptions);
- options = Ext.applyIf(options, {
- zoom: 14,
- center: center,
- mapTypeId: google.maps.MapTypeId.HYBRID
- });
- this.gmap = new google.maps.Map(this.body.dom, options);
- if (marker) {
- this.addMarker(Ext.applyIf(marker, {
- position: center
- }));
- }
-
- Ext.each(this.markers, this.addMarker, this);
- },
-
- addMarker: function(marker) {
- marker = Ext.apply({
- map: this.gmap
- }, marker);
-
- if (!marker.position) {
- marker.position = new google.maps.LatLng(marker.lat, marker.lng);
- }
- var o = new google.maps.Marker(marker);
- Ext.Object.each(marker.listeners, function(name, fn){
- google.maps.event.addListener(o, name, fn);
- });
- return o;
- },
-
- lookupCode : function(addr, marker) {
- this.geocoder = new google.maps.Geocoder();
- this.geocoder.geocode({
- address: addr
- }, Ext.Function.bind(this.onLookupComplete, this, [marker], true));
- },
-
- onLookupComplete: function(data, response, marker){
- if (response != 'OK') {
- Ext.MessageBox.alert('Error', 'An error occured: "' + response + '"');
- return;
- }
- this.createMap(data[0].geometry.location, marker);
- },
-
- afterComponentLayout : function(w, h){
- this.callParent(arguments);
- this.redraw();
- },
-
- redraw: function(){
- var map = this.gmap;
- if (map) {
- google.maps.event.trigger(map, 'resize');
- }
- }
-
- });
- </pre>
- </body>
- </html>
|