GOOGLE MAPS
Belo Horizonte, 05 08 2012

Teste Maps 



Codigo
function doGet() {
var app = UiApp.createApplication().setTitle("Teste Maps");
  
var _vermainpanel = {
  "background-color":"white",
  //#0b3b0b#F2F2F2#F2F2F2
  "border":"solid 1px #C2C2C2",
  "border-top-left-radius":"10px 10px",
  "border-top-right-radius":"10px 10px",
  "border-bottom-left-radius":"10px 10px",
  "border-bottom-right-radius":"10px 10px",
  "width":"330px",
  }
      
var _addresslabel = {
    "font-family":"verdana" ,    
    "font-size":"normal",
    "font-weight": "bold",
    "color": "#3D85C6",
    "position": "relative",
    "width":"80px",
    "margin":"4px",
    "height":"19px",
     "margin-left" :"10px",  
  }          
      
var _addresstextbox = {
    "font-family":"verdana" ,    
    "font-size":"normal",
    "margin":"4px",
    "width":"220px",
    "height":"19px",
     "margin-left" :"10px",  
    
  }     
      
var _btn = {
   "color":"#3D85C6",
   "font-family": "Open Sans",
   "font-size":"1.2em",
   "font-weight":"bold",
   "background-color": "transparent",
   "border":"0px",
   "border-top":"2px solid #F0F0F0",
   "text-align":"center",
   "width":"90px",
   "height":"26px",
     "margin-left" :"10px",  
    "margin-bottom" :"10px",   
  }           
  
var _mapimg = {
  "border":"solid 2px #C2C2C2",    
  "border-top-left-radius":"20px 20px",
  "border-top-right-radius":"20px 20px",
  "border-bottom-left-radius":"20px 20px",
  "border-bottom-right-radius":"20px 20px",
  "width":"300px",
  "height":"300px",  
  "margin-left" :"10px",  
  "margin-bottom" :"10px",   
  }  
      
var _maplable = {
    "font-family":"verdana" ,    
    "font-size":"normal",
    "font-weight": "bold",
    "color": "#3D85C6",
    "position": "relative",
    "width":"90%",
    "margin":"10px",
    "height":"19px",
    "margin-left" :"10px",  
    "margin-bottom" :"10px",   

  }          
      
var verMainPanel = app.createVerticalPanel();
library.applyCSS(verMainPanel, _vermainpanel); 
  
var verPanel = app.createVerticalPanel().setId('verpanel');
library.applyCSS(verPanel, _vermainpanel);
  
var addressLabel = app.createLabel("Endereço:").setId('addresslabel').setVisible(true);
library.applyCSS(addressLabel, _addresslabel);

  
var addressTextBox = app.createTextBox().setName('addresstextbox').setId('addresstextbox').setVisible(true);
library.applyCSS(addressTextBox, _addresstextbox);  
  
var searchButton = app.createButton('Procura' ).setId('searchbutton').setVisible(true).setEnabled(true);
library.applyCSS(searchButton,_btn);
 
var clickHandlerSearch = app.createServerClickHandler("respondToSearch");
searchButton.addClickHandler(clickHandlerSearch);
clickHandlerSearch.addCallbackElement(verMainPanel);

var center = "belo horizonte, mg, brasil"; 
var map = Maps.newStaticMap()
             .addAddress(center)
             .setCenter(center)
             .setSize(300,300)
             
var mapImg = app.createImage(map.getMapUrl()).setVisible(true).setId('mapimg');
library.applyCSS(mapImg,_mapimg);
  
var mapLable = app.createLabel(map.getMapUrl().toString()).setId("maplable").setVisible(false);
library.applyCSS(mapLable,_maplable);
  
verPanel.add(addressLabel);
verPanel.add(addressTextBox);
verPanel.add(searchButton);  
verPanel.add(mapImg);
verPanel.add(mapLable);
  
verMainPanel.add(verPanel);
  
app.add(verMainPanel);
return app.close();
}


function respondToSearch(e) {
var app = UiApp.getActiveApplication();
var address = e.parameter.addresstextbox;
  
var map = Maps.newStaticMap()
             .addAddress(address)
             .addMarker(address)
             .setCenter(address)
             .setSize(300,300)

app.getElementById('mapimg').setUrl(map.getMapUrl());
app.getElementById('addresslabel').setValue('');
app.getElementById('maplable').setText( address).setVisible(true) ;
  
return app; 
}