scripts/ckeditor4.1.0/plugins/googlemaps/dialogs/main.js

   1 /**
   2  * Magic3 CKEditorプラグイン
   3  *
   4  * JavaScript 1.5
   5  *
   6  * LICENSE: This source file is licensed under the terms of the GNU General Public License.
   7  *
   8  * @package    Magic3 Framework
   9  * @author     平田直毅(Naoki Hirata) <naoki@aplo.co.jp>
  10  * @copyright  Copyright 2006-2013 Magic3 Project.
  11  * @license    http://www.gnu.org/copyleft/gpl.html  GPL License
  12  * @version    SVN: $Id: main.js 6030 2013-05-22 00:48:33Z fishbone $
  13  * @link       http://www.magic3.org
  14  */
  15
  16 (function(){
  17         CKEDITOR.dialog.add('googlemaps', function(editor){
  18                 var dialog;
  19                 var mode;
  20                 var mapDiv;
  21                 var mapInfo;
  22                 var mapObj;
  23                 var markers = [];
  24                 var activeMarker;
  25                 var fieldZoom;
  26                 var fieldCenterLatitude;
  27                 var fieldCenterLongitude;
  28                 var fakeImage;
  29                 var infoWindow;
  30                 var polyline;
  31
  32                 // スクリプト読み込み
  33 //              var path = CKEDITOR.plugins.getPath('googlemaps');
  34 //              CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(path) + 'dialogs/polyline.js');
  35                 var pluginUrl = CKEDITOR.getUrl(CKEDITOR.plugins.getPath( 'googlemaps' ));
  36
  37                 var loadSelectionData = function()
  38                 {
  39                         if (fakeImage){         // マップ選択からの起動の場合
  40                                 var className = fakeImage.$.className;
  41                                 var mapNumber;
  42                                 var regExp = /cke_googlemaps(\d+)/;
  43                                 if (regExp.test(className)) mapNumber = RegExp.$1;
  44                                 mapInfo = GoogleMapsHandler.getMap(mapNumber);
  45                                 if (!mapInfo) mapInfo = GoogleMapsHandler.createNew();
  46                         } else {                // マップが選択されていない場合は新規作成
  47                                 mapInfo = GoogleMapsHandler.createNew();
  48                         }
  49
  50                         // 入力値初期化
  51                         dialog.setValueOf('tab_map', 'txtWidth', mapInfo.width);
  52                         dialog.setValueOf('tab_map', 'txtHeight', mapInfo.height);
  53                         dialog.setValueOf('tab_map', 'cmbZoom', mapInfo.zoom);
  54                         dialog.setValueOf('tab_map', 'txtCenterLat', mapInfo.centerLat);
  55                         dialog.setValueOf('tab_map', 'txtCenterLon', mapInfo.centerLon);
  56 //                      dialog.setValueOf('tab_line', 'txtEncodedPolyline', mapInfo.linePoints);
  57 //                      dialog.setValueOf('tab_line', 'txtEncodedLevels', mapInfo.lineLevels);
  58
  59                         // マップ作成
  60                         setPreviewElement(mapInfo.mapType);
  61
  62                         // マーカー設定
  63                         var markerPoints = mapInfo.markerPoints;
  64                         for (var i = 0; i < markerPoints.length; i++)
  65                         {
  66                                 var point = new google.maps.LatLng(parseFloat(markerPoints[i].lat), parseFloat(markerPoints[i].lon));
  67                                 addMarkerAtPoint(point, markerPoints[i].text, false);
  68                         }
  69
  70                         // ライン描画
  71                         polyline.setMap(mapObj);
  72                         polyline.decodePolyline(mapInfo.linePoints);
  73                 };
  74                 var setPreviewElement = function(mapType)
  75                 {
  76                         mapDiv = document.getElementById("gmapPreview" + editor.id);
  77                         resizeMap();
  78
  79                         var allMapTypes = [     google.maps.MapTypeId.ROADMAP,
  80                                                         google.maps.MapTypeId.SATELLITE,
  81                                                         google.maps.MapTypeId.HYBRID,
  82                                                         google.maps.MapTypeId.TERRAIN   ];
  83                         var opts = {    mapTypeId:allMapTypes[mapType],
  84                                                         mapTypeControlOptions:{ mapTypeIds:allMapTypes } };
  85                         mapObj = new google.maps.Map(mapDiv, opts);
  86
  87                         updatePreview();
  88
  89                         // イベント設定
  90                         google.maps.event.addListener(mapObj, 'zoom_changed', function(){
  91                                 fieldZoom.value = mapObj.getZoom();
  92                         });
  93                         google.maps.event.addListener(mapObj, 'center_changed', function(){                     // out of memory on IE8
  94                                 var point = mapObj.getCenter();
  95                                 fieldCenterLatitude.value = point.lat().RoundTo(5);
  96                                 fieldCenterLongitude.value = point.lng().RoundTo(5);
  97                         });
  98                         google.maps.event.addListener(mapObj, 'click', function(e){
  99                                 var point = e.latLng;
 100                                 var selectedTab = CKEDITOR.dialog.getCurrent().definition.dialog._.currentTabId;                // 選択中のタブIDを取得
 101                                 switch (selectedTab){
 102                                         case 'tab_map':
 103                                         case 'tab_search':
 104                                                 break;
 105                                         case 'tab_marker':
 106                                                 if (mode == 'AddMarker') addMarkerAtPoint(point, editor.lang.googlemaps.markerDefaultText || '', true);
 107                                                 break;
 108                                         case 'tab_line':
 109                                                 polyline.createPoint(point.lat(), point.lng(), 3);
 110                                                 polyline.createEncodings(false);
 111                                         break;
 112                                 }
 113                                 //mapDiv.focus();
 114                         });
 115                         google.maps.event.addDomListener(mapDiv, 'keydown', function(e){
 116                                 if (!e) e = window.event;
 117
 118                                 var iCode = (e.keyCode || e.charCode);
 119                                 var selectedTab = CKEDITOR.dialog.getCurrent().definition.dialog._.currentTabId;                // 選択中のタブIDを取得
 120                                 if (iCode == 46){
 121                                         switch(selectedTab){
 122                                                 case 'tab_map':
 123                                                 case 'tab_search':
 124                                                 case 'tab_marker':
 125                                                         break;
 126                                                 case 'tab_line':
 127                                                         polyline.deletePoint();
 128                                                         break;
 129                                         }
 130                                 }
 131                         });
 132                 };
 133                 var resizeMap = function()
 134                 {
 135                         if (!mapDiv) return;
 136
 137                         mapDiv.style.width = dialog.getValueOf('tab_map', 'txtWidth') + 'px';
 138                         mapDiv.style.height = dialog.getValueOf('tab_map', 'txtHeight') + 'px';
 139
 140                         //ResizeParent();
 141                 };
 142                 var updatePreview = function()
 143                 {
 144                         if (!mapObj) return;
 145
 146                         mapObj.setCenter(new google.maps.LatLng(fieldCenterLatitude.value, fieldCenterLongitude.value));
 147                         mapObj.setZoom(parseInt(fieldZoom.value, 10));
 148                 };
 149                 var doSearch = function()
 150                 {
 151                         var address = dialog.getValueOf('tab_search', 'txtAddress');
 152                         var geocoder = new google.maps.Geocoder();
 153
 154                         function processPoint(point)
 155                         {
 156                                 if (point){
 157                                         dialog.setValueOf('tab_map', 'txtCenterLat', point.lat().RoundTo(5));
 158                                         dialog.setValueOf('tab_map', 'txtCenterLon', point.lng().RoundTo(5));
 159
 160                                         // 検索位置にマーカーを設定
 161                                         addMarkerAtPoint(point, address);
 162
 163                                         updatePreview();
 164                                 } else {
 165                                         alert(editor.lang.googlemaps.msgNotFound.replace("%s", address));
 166                                 }
 167                         }
 168
 169                         geocoder.geocode({ 'address':address }, function(results, status){
 170                                 if (status == google.maps.GeocoderStatus.OK){
 171                                         processPoint(results[0].geometry.location);
 172                                 } else {
 173                                         alert(editor.lang.googlemaps.msgNotFound.replace("%s", address));
 174                                 }
 175                         });
 176                 };
 177                 var addMarker = function()
 178                 {
 179                         if (mode == 'AddMarker'){
 180                                 finishAddMarker();
 181                                 return;
 182                         }
 183                         $('#btnAddNewMarker' + editor.id).attr('src', pluginUrl + 'images/AddMarkerDown.png');
 184                         $('#msgMarkerInstruction' + editor.id).text(editor.lang.googlemaps.msgMarkerInstruction2);
 185                         mode = 'AddMarker';
 186                         mapObj.setOptions({ draggableCursor:'crosshair' });
 187                 }
 188                 var addMarkerAtPoint = function(point, text, interactive)
 189                 {
 190                         var marker = createMarker(point, text);
 191                         marker.setMap(mapObj);
 192                         markers.push(marker);
 193                         finishAddMarker();
 194
 195                         if (interactive) editMarker(marker);
 196                 };
 197                 var createMarker = function(point, html)
 198                 {
 199                         var marker = new google.maps.Marker({ position:point, title:html, draggable:true });
 200                         google.maps.event.addListener(marker, "click", function(){
 201                                 editMarker(this);
 202                         });
 203                         return marker;
 204                 }
 205                 var finishAddMarker = function()
 206                 {
 207                         mode = '';
 208
 209                         $('#btnAddNewMarker' + editor.id).attr('src', pluginUrl + 'images/AddMarker.png');
 210                         $('#msgMarkerInstruction' + editor.id).text(editor.lang.googlemaps.msgMarkerInstruction1);
 211                         mapObj.setOptions({ draggableCursor:'default' });
 212                 };
 213                 var editMarker = function(marker)
 214                 {
 215                         var selectedTab = CKEDITOR.dialog.getCurrent().definition.dialog._.currentTabId;                // 選択中のタブIDを取得
 216                         if (selectedTab == 'tab_marker'){               // マーカーコンテンツを編集
 217                                 activeMarker = marker;
 218                                 mode = 'EditMarker';
 219
 220                                 if (infoWindow) infoWindow.close();
 221                                 infoWindow = new google.maps.InfoWindow({ content:generateEditPopupString(marker.getTitle()) });
 222                                 google.maps.event.addListener(infoWindow, 'domready', function(){                       // 吹き出しの入力画面のイベントを設定
 223                                         $("#btnOk").click(function (){
 224                                                 updateCurrentMarker();
 225                                         });
 226                                         $("#btnCancel").click(function (){
 227                                                 closeInfoWindow();
 228                                         });
 229                                         $("#btnDeleteMarker").click(function (){
 230                                                 deleteCurrentMarker();
 231                                         });
 232                                 });
 233                                 infoWindow.open(mapObj, marker);
 234                         } else {
 235                                 if (infoWindow) infoWindow.close();
 236                                 infoWindow = new google.maps.InfoWindow({ content:marker.getTitle() });
 237                                 infoWindow.open(mapObj, marker);
 238                         }
 239                 };
 240                 var closeInfoWindow = function()
 241                 {
 242                         mode = '';
 243
 244                         if (infoWindow) infoWindow.close();
 245                         infoWindow = null;
 246                         activeMarker = null;
 247                 };
 248                 var updateCurrentMarker = function ()
 249                 {
 250                         if (activeMarker) activeMarker.setTitle($('#txtMarkerText' + editor.id).val().replace(/\n/g, '<br>'));
 251                         closeInfoWindow();
 252                 };
 253                 var deleteCurrentMarker = function()
 254                 {
 255                         for (var j = 0; j < markers.length; j++){
 256                                 if (markers[j] == activeMarker){
 257                                         markers.splice(j, 1);
 258                                         break;
 259                                 }
 260                         }
 261                         var tmp = activeMarker;
 262                         closeInfoWindow();
 263
 264                         tmp.setMap(null);
 265                 };
 266                 var generateEditPopupString = function(text)
 267                 {
 268                         return '<div><label for="txtMarkerText' + editor.id + '">' + editor.lang.googlemaps.markerText + '</label></div>' +
 269                                 '<div><textarea id="txtMarkerText' + editor.id + '" class="cke_dialog_ui_input_textarea" style="width:300px; height:120px;">' + text.replace(/<br>/g, '\n') + '</textarea></div>' +
 270                                 '<div class="cke_dialog_footer_buttons"><div style="width:50%;display:inline-block;float:left;"><div class="cke_dialog_ui_hbox_child" style="display:inline-block;"><a id="btnDeleteMarker" class="cke_dialog_ui_button"><span class="cke_dialog_ui_button">' + editor.lang.googlemaps.deleteMarker + '</span></a></div></div>' +
 271                                 '<div style="width:40%;display:inline-block;float:right;"><div class="cke_dialog_ui_hbox_first" style="display:inline-block;"><a id="btnOk" class="cke_dialog_ui_button cke_dialog_ui_button_ok"><span class="cke_dialog_ui_button">' + editor.lang.common.ok + '</span></a></div><div class="cke_dialog_ui_hbox_last" style="display:inline-block;">' +
 272                                 '<a id="btnCancel" class="cke_dialog_ui_button cke_dialog_ui_button_cancel"><span class="cke_dialog_ui_button">' + editor.lang.common.cancel + '</span></a></div></div></div>';
 273                 };
 274                 var commitValue = function(data){
 275                         var id = this.id;
 276                         if ( !data.info ) data.info = {};
 277                         data.info[id] = this.getValue();
 278                 };
 279                 return {
 280                         title: editor.lang.googlemaps.title,
 281                         minWidth: 420,
 282                         minHeight: 310,
 283                         onLoad: function(){             // 初期処理
 284                                 dialog = this;          // 参照取得
 285
 286                                 // ダイアログ画面作成
 287                                 // ダイアログサイズの設定
 288 //                              var width = dialog.getSize().width;
 289 //                              var height = dialog.getSize().height;
 290 //                              dialog.resize(width, height);
 291
 292                                 // マップの位置を修正
 293 /*                              var off = $('#placeholder_map').position();
 294                                 $('#placeholder_search').css({position:'absolute', top:off.top + 'px',left:off.left + 'px'});
 295                                 $('#placeholder_marker').css({position:'absolute', top:off.top + 'px',left:off.left + 'px'});
 296                                 $('#placeholder_line').css({position:'absolute', top:off.top + 'px',left:off.left + 'px'});
 297                                 */
 298                                 // タブが変更された場合はマップを移動
 299                                 dialog.on('selectPage', function(e){
 300                                         switch (e.data.page){
 301                                         case 'tab_map':
 302                                                 $('#gmapPreview' + editor.id).appendTo('#placeholder_map' + editor.id);
 303                                                 break;
 304                                         case 'tab_search':
 305                                                 $('#gmapPreview' + editor.id).appendTo('#placeholder_search' + editor.id);
 306                                                 break;
 307                                         case 'tab_marker':
 308                                                 $('#gmapPreview' + editor.id).appendTo('#placeholder_marker' + editor.id);
 309                                                 break;
 310                                         case 'tab_line':
 311                                                 $('#gmapPreview' + editor.id).appendTo('#placeholder_line' + editor.id);
 312                                                 break;
 313                                         }
 314
 315                                         if (e.data.page == 'tab_line'){
 316                                                 polyline.showLinePoints();
 317                                         } else {
 318                                                 polyline.hideLinePoints();
 319                                         }
 320
 321                                         if (e.data.page != 'tab_marker') finishAddMarker();
 322                                 });
 323                                 // イベント登録
 324                                 $('#btnAddNewMarker' + editor.id).click(function(){
 325                                         addMarker();
 326                                 }).attr({ title:editor.lang.googlemaps.addMarker, alt:editor.lang.googlemaps.addMarker });
 327                         },
 328         /*              onFocus: function() {
 329                                 mapDiv.focus();
 330                         },*/
 331                         onShow: function(){
 332                                 // マップ初期化
 333                                 markers = [];
 334                                 polyline = new Polyline();
 335
 336                                 // 選択されているマップの情報を取り込む
 337                                 var selectedElement = this.getSelectedElement();
 338                                 if (selectedElement){
 339                                         fakeImage = selectedElement;
 340                                         var realElement = editor.restoreRealElement(selectedElement);
 341                                 } else {
 342                                         fakeImage = null;
 343                                 }
 344                                 loadSelectionData();
 345                         },
 346                         onOk: function(){
 347                                 // A container for our field data
 348                                 var data = {};
 349
 350                                 // 入力データの確定
 351                                 this.commitContent(data);
 352
 353                                 // マップ情報更新
 354                                 mapInfo.width = data.info['txtWidth'];
 355                                 mapInfo.height = data.info['txtHeight'];
 356                                 mapInfo.zoom = data.info['cmbZoom'];
 357                                 mapInfo.centerLat = data.info['txtCenterLat'];
 358                                 mapInfo.centerLon = data.info['txtCenterLon'];
 359                                 var markerPoints = [];
 360                                 for (var i=0; i < markers.length; i++){
 361                                         var point = markers[i].getPosition();
 362                                         markerPoints.push({ lat:point.lat().RoundTo(5), lon:point.lng().RoundTo(5), text:markers[i].getTitle() });
 363                                 }
 364                                 mapInfo.markerPoints = markerPoints;
 365
 366                                 // マップ埋め込みタグの作成
 367                                 mapInfo.linePoints = polyline.encodedPolyline;
 368                                 mapInfo.lineLevels = polyline.encodedLevels;
 369                                 var script = mapInfo.buildScript();
 370 //                              var scriptElement = CKEDITOR.dom.element.createFromHtml(script, editor.document);
 371 //                              var newMapElement = CKEDITOR.dom.element.createFromHtml('<div></div>', editor.document);
 372 //                              newMapElement.append(scriptElement);
 373                                 var newMapElement = CKEDITOR.dom.element.createFromHtml('<div>' + script + '</div>', editor.document);          // IE8 not work.
 374                                 var style = 'width:' + mapInfo.width + 'px;height:' + mapInfo.height + 'px;display:none;';
 375                                 newMapElement.setAttributes({
 376                                         'id': 'gmap' + mapInfo.number,
 377                                         'style': style,
 378                                         'class': 'm3googlemaps'
 379                                 });
 380
 381                                 // ビュー更新前、画像のみ変更
 382                                 var extraStyles = {     'background-image': 'url(' + mapInfo.generateStaticMap() + ')',
 383                                                         'background-position': 'center center',
 384                                                         'background-repeat': 'no-repeat',
 385                                                         'border': '0px',
 386                                                         'width': mapInfo.width + 'px',
 387                                                         'height': mapInfo.height + 'px'
 388                                                         };
 389                                 var newFakeImage = editor.createFakeElement(newMapElement, 'cke_googlemaps' + mapInfo.number, 'div', false);
 390                                 newFakeImage.setStyles( extraStyles );
 391
 392                                 if (fakeImage){         // マップ更新の場合
 393                                         newFakeImage.replace( fakeImage );
 394                                         editor.getSelection().selectElement( newFakeImage );
 395                                 } else {
 396                                         editor.insertElement( newFakeImage );
 397                                 }
 398                         },
 399                         onCancel: function(){
 400                                 fakeImage = null;
 401                         },
 402                         contents: [{
 403                                 id: 'tab_map',
 404                                 label: editor.lang.googlemaps.mapTitle,
 405                                 elements :[
 406                                 {
 407                                         // 項目を横に配置
 408                                         type: 'hbox',
 409                                         widths: [ '10%', '20%' ],               // 項目間幅を調整
 410         /*                              padding: '5px',*/
 411                                         children: [
 412                                         {
 413                                                 type : 'text',
 414                                                 id : 'txtWidth',
 415                                                 label: editor.lang.googlemaps.width,
 416                                                 width: '40px',
 417                                                 'default': 400,
 418                                                 validate : function() {
 419                                                         var pass = true,
 420                                                         value = this.getValue();
 421                                                         pass = pass && CKEDITOR.dialog.validate.integer()( value ) && value > 0;
 422                                                         if ( !pass ){
 423                                                                 alert( "Invalid Width" );
 424                                                                 this.select();
 425                                                         }
 426                                                         return pass;
 427                                                 },
 428                                                 onChange: function(){
 429                                                         resizeMap();
 430                                                 },
 431                                                 commit: commitValue
 432                                         }, {
 433                                                 type : 'text',
 434                                                 id : 'txtHeight',
 435                                                 label: editor.lang.googlemaps.height,
 436                                                 width: '40px',
 437                                                 'default': 240,
 438                                                 validate : function() {
 439                                                         var pass = true,
 440                                                         value = this.getValue();
 441                                                         pass = pass && CKEDITOR.dialog.validate.integer()( value ) && value > 0;
 442                                                         if ( !pass ){
 443                                                                 alert( "Invalid Height" );
 444                                                                 this.select();
 445                                                         }
 446                                                         return pass;
 447                                                 },
 448                                                 onChange: function(){
 449                                                         resizeMap();
 450                                                 },
 451                                                 commit: commitValue
 452                                         }, {
 453                                                 type: 'select',
 454                                                 id: 'cmbZoom',
 455                                                 label: editor.lang.googlemaps.zoomLevel,
 456                                                 style: 'width:50px',
 457                                                 'default': '',
 458                                                 items: [
 459                                                         [ '0', '0' ],
 460                                                         [ '1', '1' ],
 461                                                         [ '2', '2' ],
 462                                                         [ '3', '3' ],
 463                                                         [ '4', '4' ],
 464                                                         [ '5', '5' ],
 465                                                         [ '6', '6' ],
 466                                                         [ '7', '7' ],
 467                                                         [ '8', '8' ],
 468                                                         [ '9', '9' ],
 469                                                         [ '10', '10' ],
 470                                                         [ '11', '11' ],
 471                                                         [ '12', '12' ],
 472                                                         [ '13', '13' ],
 473                                                         [ '14', '14' ],
 474                                                         [ '15', '15' ],
 475                                                         [ '16', '16' ],
 476                                                         [ '17', '17' ]
 477                                                 ],
 478                                                 onLoad: function(){
 479                                                         fieldZoom = document.getElementById(this.getInputElement().$.id);                       // 参照を取得
 480                                                 },
 481                                                 onChange: function() {
 482                                                         if (mapObj) mapObj.setZoom(parseInt(this.getValue()), 10);
 483                                                 },
 484                                                 commit: commitValue
 485                                         } ]
 486                                 }, {
 487                                         type: 'hbox',
 488                                         widths: [ '50%', '50%' ],
 489                                         children: [
 490                                         {
 491                                                 type: 'text',
 492                                                 id: 'txtCenterLat',
 493                                         //      requiredContent: 'img(cke-xyz)', // Random text like 'xyz' will check if all are allowed.
 494                                                 label: editor.lang.googlemaps.latitude,
 495                                                 'default': '',
 496                                                 onLoad: function(){
 497                                                         fieldCenterLatitude = document.getElementById(this.getInputElement().$.id);                     // 参照を取得
 498                                                 },
 499                                                 onChange: function() {
 500                                                         if (mapObj) mapObj.setCenter(new google.maps.LatLng(this.getValue(), fieldCenterLongitude.value));
 501                                                 },
 502                                                 commit: commitValue
 503                                         }, {
 504                                                 type: 'text',
 505                                                 id: 'txtCenterLon',
 506                                                 //requiredContent: 'img[title]',
 507                                                 label: editor.lang.googlemaps.longitude,
 508                                                 'default': '',
 509                                                 onLoad: function(){
 510                                                         fieldCenterLongitude = document.getElementById(this.getInputElement().$.id);            // 参照を取得
 511                                                 },
 512                                                 onChange: function() {
 513                                                         if (mapObj) mapObj.setCenter(new google.maps.LatLng(fieldCenterLatitude.value, this.getValue()));
 514                                                 },
 515                                                 commit: commitValue
 516                                         } ]
 517                                 }, {
 518                                         type: 'html',
 519                                         html: '<div id="placeholder_map' + editor.id + '"><div id="gmapPreview' + editor.id + '" style="outline:0;" tabIndex="-1"></div></div>'
 520                                 } ]             // elements
 521                         }, {
 522                                 id: 'tab_search',
 523                                 label: editor.lang.googlemaps.searchTitle,
 524                                 elements: [
 525                                 {
 526                                         type: 'hbox',
 527                                         widths: [ '5%', '5%' ],
 528                                         children: [
 529                                         {
 530                                                 type: 'text',
 531                                                 id: 'txtAddress',
 532                                                 label: editor.lang.googlemaps.searchLabel,
 533                                                 width: '300px',
 534                                                 labelLayout: 'horizontal'
 535                                                 /*onLoad: function(){
 536                                                         fieldAddress = $('#' + this.getInputElement().$.id);                    // 参照を取得
 537                                                 }*/
 538                                         }, {
 539                                                 type: 'button',
 540                                                 id: 'btnSearch',
 541                                                 align: 'left',
 542                                                 //style: 'width:50px',
 543                                                 label: editor.lang.googlemaps.search,
 544                                                 onClick: function(){
 545                                                         doSearch();
 546                                                 }
 547                                         } ]
 548                                 }, {
 549                                         type: 'html',
 550                                         html: '<div id="placeholder_search' + editor.id + '"></div>'
 551                                 } ]
 552                         }, {
 553                                 id: 'tab_marker',
 554                                 label: editor.lang.googlemaps.markerTitle,
 555                                 elements: [
 556                                 {
 557                                         type: 'html',
 558 html: '<img id="btnAddNewMarker' + editor.id + '" src="' + pluginUrl + 'images/AddMarker.png" style="cursor:pointer;" /><div id="msgMarkerInstruction' + editor.id + '" style="display:inline-block;">' + editor.lang.googlemaps.msgMarkerInstruction1 + '</div>'
 559                                 }, {
 560                                         type: 'html',
 561                                         html: '<div id="placeholder_marker' + editor.id + '"></div>'
 562                                 } ]
 563                         }, {
 564                                 id: 'tab_line',
 565                                 label: editor.lang.googlemaps.lineTitle,
 566                                 elements: [
 567                                 {
 568                                         type: 'html',
 569                                         html: '<p>' + editor.lang.googlemaps.msgLineInstruction + '</p>'
 570                                 }, {
 571                                         type: 'html',
 572                                         html: '<div id="placeholder_line' + editor.id + '"></div>'
 573                                 } ]
 574                         } ]
 575                 };
 576         });
 577 })();