Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Problems with Google Maps V3 and smartgwt

    Hi,

    I'm having trouble trying to embbed a map from google map api v3 using SmartGwt at the same time.

    The problem is that the PaneControl, as well as the Streetview button get hidden when I add SmartGwt support.

    The version I'm using is "SmartClient Version: SC_SNAPSHOT-2011-08-02/LGPL Development Only (built 2011-08-02)"

    I tried this both building my own map wrapper for gwt and using "the official" wrapper.

    This situation happens in every browser I tested (mozilla firefox 32.0.2, chrome 37.0.2062.120 mand so on).

    Map controls cannot be turned on by anymeans.

    I need help into this subject.

    Regards

    Here is the code I used:

    Code:
    package com.paco.test.client;
    
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.core.client.Scheduler;
    import com.google.gwt.event.dom.client.ClickEvent;
    import com.google.gwt.event.dom.client.ClickHandler;
    import com.google.gwt.user.client.Command;
    import com.google.gwt.user.client.ui.Button;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.google.gwt.user.client.ui.SimplePanel;
    import com.google.maps.gwt.client.GoogleMap;
    import com.google.maps.gwt.client.LatLng;
    import com.google.maps.gwt.client.MapOptions;
    
    /**
     * Entry point classes define <code>onModuleLoad()</code>.
     */
    public class PruebaMapas0 implements EntryPoint {
    
    
    	/**
    	 * This is the entry point method.
    	 */
    	public void onModuleLoad() {
    		
    		
    
    		Button myB = new Button("prueba",new ClickHandler() {
    			
    			@Override
    			public void onClick(ClickEvent event) {
    				Scheduler.get().scheduleDeferred(new Command() {
    				    public void execute () {
    				      inicializa();
    				    }
    				  });
    			}
    		});
    		
    	
    		
    		RootPanel.get().add(myB);
    
    	}
    	
    	public GoogleMap theMap=null;
    	
    	protected void inicializa(){	
    		MapOptions options  = getMapOptions();
    		SimplePanel widg = new SimplePanel() ;
    
    	    widg.setSize("800px", "600px");
    
    	    theMap = GoogleMap.create( widg.getElement(), options ) ;
    	    try{
    	    	RootPanel.get().add( widg ) ;
    	    }
    	    catch(Throwable t){
    	    	t.printStackTrace();
    	    }
    	}
    	
    	protected MapOptions getMapOptions(){
    		MapOptions opts = MapOptions.create();
    		opts.setCenter(LatLng.create(19.434568, -99.153223));
    		opts.setZoom(18);
    		opts.setPanControl(true);
    		return opts;
    	}
    
    }

    #2
    Most likely, the controls have too low of a zIndex. You can easily confirm this with any browser's DOM inspector (hit f12).

    SmartGWT uses very high zIndexes by default due to various browser bugs.

    If you Google how to set the zIndex of the GoogleMap widget, or or it's various floating controls, it looks like there are various approaches.

    Comment


      #3
      zIndex

      Originally posted by Isomorphic View Post
      Most likely, the controls have too low of a zIndex. You can easily confirm this with any browser's DOM inspector (hit f12).

      SmartGWT uses very high zIndexes by default due to various browser bugs.

      If you Google how to set the zIndex of the GoogleMap widget, or or it's various floating controls, it looks like there are various approaches.
      Thanks for the reply, but I'm afraid this is not the case. As a matter of fact when Smartgwt is used, the <div> section that contains the controls is missing so there is no way to increase the zIndex.

      Here is an example:

      Without Smartgwt you may notice a div section that contains controls like:

      Code:
      <a target="_blank"
                          href="http://maps.google.com/maps?ll=19.434568,-99.153223&amp;z=16&amp;t=m&amp;hl=es-ES&amp;gl=US&amp;mapclient=apiv3"
                          title="Haz clic aquí para visualizar esta zona en Google Maps"
                          style="position: static; overflow: visible; float: none; display: inline;">
      With Smartgwt this div section is missing among others.

      Div section without Smartgwt:

      Code:
      <div class="gm-style"
             style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
             <div
                   style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url(http://maps.gstatic.com/mapfiles/openhand_8_8.cur) 8 8, default;">
                   <div
                          style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;">
                                 <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
                                        <div style="position: absolute; left: 0px; top: 0px; z-index: 1;">
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: 509px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: 509px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: 509px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: 509px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: 509px;"></div>
                                        </div>
                                 </div>
                          </div>
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div>
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div>
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;">
                                 <div style="position: absolute; left: 0px; top: 0px; z-index: -1;">
                                        <div style="position: absolute; left: 0px; top: 0px; z-index: 1;">
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: 509px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: 509px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: 509px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: 509px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; overflow: hidden; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: 509px;"></div>
                                        </div>
                                 </div>
                          </div>
                          <div style="position: absolute; z-index: 0; left: 0px; top: 0px;">
                                 <div style="overflow: hidden;"></div>
                          </div>
                          <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
                                 <div style="position: absolute; left: 0px; top: 0px; z-index: 1;">
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: -3px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14717!3i29159!2m3!1e0!2sm!3i275300080!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: 253px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14717!3i29160!2m3!1e0!2sm!3i275300080!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: -3px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14716!3i29159!2m3!1e0!2sm!3i275298882!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: 253px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14716!3i29160!2m3!1e0!2sm!3i275298882!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: -3px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14718!3i29159!2m3!1e0!2sm!3i275300080!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: 253px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14718!3i29160!2m3!1e0!2sm!3i275300080!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: -259px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14717!3i29158!2m3!1e0!2sm!3i275298882!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: 509px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14717!3i29161!2m3!1e0!2sm!3i275300080!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: 509px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14716!3i29161!2m3!1e0!2sm!3i275295971!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: -259px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14716!3i29158!2m3!1e0!2sm!3i275298882!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: -259px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14718!3i29158!2m3!1e0!2sm!3i275298882!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: 509px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14718!3i29161!2m3!1e0!2sm!3i275300080!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: 253px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14715!3i29160!2m3!1e0!2sm!3i275257107!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: 253px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14719!3i29160!2m3!1e0!2sm!3i275300346!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: -3px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14719!3i29159!2m3!1e0!2sm!3i275300346!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: -3px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14715!3i29159!2m3!1e0!2sm!3i275254737!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: -259px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14719!3i29158!2m3!1e0!2sm!3i275298753!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: -259px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14715!3i29158!2m3!1e0!2sm!3i275254737!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: 509px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14715!3i29161!2m3!1e0!2sm!3i275295971!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: 509px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14719!3i29161!2m3!1e0!2sm!3i275300346!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                 </div>
                          </div>
                   </div>
                   <div
                          style="position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: 100%;"></div>
                   <div
                          style="position: absolute; left: 0px; top: 0px; z-index: 3; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"></div>
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div>
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"></div>
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div>
                   </div>
             </div>
             <div
                   style="margin-left: 5px; margin-right: 5px; z-index: 1000000; position: absolute; left: 0px; bottom: 0px;">
                   <a target="_blank"
                          href="http://maps.google.com/maps?ll=19.434568,-99.153223&amp;z=16&amp;t=m&amp;hl=es-ES&amp;gl=US&amp;mapclient=apiv3"
                          title="Haz clic aquí para visualizar esta zona en Google Maps"
                          style="position: static; overflow: visible; float: none; display: inline;">
                          <div style="width: 62px; height: 26px; cursor: pointer;">
                                 <img
                                        src="http://maps.gstatic.com/mapfiles/api-3/images/google_white2.png"
                                        draggable="false"
                                        style="position: absolute; left: 0px; top: 0px; width: 62px; height: 26px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
                          </div>
                   </a>
             </div>
             <div class="gmnoprint"
                   style="z-index: 1000001; position: absolute; right: 230px; bottom: 0px; width: 177px;">
                   <div draggable="false" class="gm-style-cc" style="-webkit-user-select: none;">
                          <div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;">
                                 <div style="width: 1px;"></div>
                                 <div
                                        style="width: auto; height: 100%; margin-left: 1px; background-color: rgb(245, 245, 245);"></div>
                          </div>
                          <div
                                 style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right;">
                                 <a
                                        style="color: rgb(68, 68, 68); text-decoration: none; cursor: pointer; display: none;">Datos de mapa</a>
                                 <span style="">Datos de mapa ©2014 Google, INEGI</span>
                          </div>
                   </div>
             </div>
             <div
                   style="padding: 15px 21px; border: 1px solid rgb(171, 171, 171); font-family: Roboto, Arial, sans-serif; color: rgb(34, 34, 34); -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px; z-index: 10000002; display: none; width: 256px; height: 148px; position: absolute; left: 250px; top: 210px; background-color: white;">
                   <div style="padding: 0px 0px 10px; font-size: 16px;">Datos de mapa</div>
                   <div style="font-size: 13px;">Datos de mapa ©2014 Google, INEGI</div>
                   <div
                          style="width: 13px; height: 13px; overflow: hidden; position: absolute; opacity: 0.7; right: 12px; top: 12px; z-index: 10000; cursor: pointer;">
                          <img src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"
                                 draggable="false"
                                 style="position: absolute; left: -2px; top: -336px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
                   </div>
             </div>
             <div class="gmnoscreen" style="position: absolute; right: 0px; bottom: 0px;">
                   <div
                          style="font-family: Roboto, Arial, sans-serif; font-size: 11px; color: rgb(68, 68, 68); direction: ltr; text-align: right; background-color: rgb(245, 245, 245);">Datos de mapa ©2014 Google, INEGI</div>
             </div>
             <div class="gmnoprint gm-style-cc" draggable="false"
                   style="z-index: 1000001; position: absolute; -webkit-user-select: none; right: 143px; bottom: 0px;">
                   <div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;">
                          <div style="width: 1px;"></div>
                          <div
                                 style="width: auto; height: 100%; margin-left: 1px; background-color: rgb(245, 245, 245);"></div>
                   </div>
                   <div
                          style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right;">
                          <a href="http://www.google.com/intl/es-ES_US/help/terms_maps.html"
                                 target="_blank"
                                 style="text-decoration: none; cursor: pointer; color: rgb(68, 68, 68);">Términos de uso</a>
                   </div>
             </div>
             <div draggable="false" class="gm-style-cc"
                   style="-webkit-user-select: none; position: absolute; right: 0px; bottom: 0px;">
                   <div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;">
                          <div style="width: 1px;"></div>
                          <div
                                 style="width: auto; height: 100%; margin-left: 1px; background-color: rgb(245, 245, 245);"></div>
                   </div>
                   <div
                          style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right;">
                          <a target="_new"
                                 title="Informar a Google acerca de errores en las imágenes o en el mapa de carreteras"
                                 href="http://maps.google.com/maps?ll=19.434568,-99.153223&amp;z=16&amp;t=m&amp;hl=es-ES&amp;gl=US&amp;mapclient=apiv3&amp;skstate=action:mps_dialog$apiref:1&amp;output=classic"
                                 style="font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); text-decoration: none; position: relative;">Informar de un error de Maps</a>
                   </div>
             </div>
             <div class="gmnoprint" draggable="false" controlwidth="78"
                   controlheight="356"
                   style="margin: 5px; -webkit-user-select: none; position: absolute; left: 0px; top: 0px;">
                   <div class="gmnoprint" controlwidth="78" controlheight="80"
                          style="cursor: url(http://maps.gstatic.com/mapfiles/openhand_8_8.cur) 8 8, default; width: 78px; height: 78px; position: absolute; left: 0px; top: 0px;">
                          <div class="gmnoprint" controlwidth="78" controlheight="80"
                                 style="width: 78px; height: 78px; position: absolute; left: 0px; top: 0px;">
                                 <div style="visibility: hidden;">
                                        <svg version="1.1" overflow="hidden" width="78px" height="78px"
                                              viewBox="0 0 78 78" style="position: absolute; left: 0px; top: 0px;">
                                              <circle cx="39" cy="39" r="35" stroke-width="3"
                                                     fill-opacity="0.2" fill="#f2f4f6" stroke="#f2f4f6"></circle>
                                              <g transform="rotate(0 39 39)">
                                                     <rect x="33" y="0" rx="4" ry="4" width="12" height="11"
                                                            stroke="#a6a6a6" stroke-width="1" fill="#f2f4f6"></rect>
                                                     <polyline points="36.5,8.5 36.5,2.5 41.5,8.5 41.5,2.5"
                                                            stroke-linejoin="bevel" stroke-width="1.5" fill="#f2f4f6"
                                                            stroke="#000"></polyline>
                                              </g>
                                        </svg>
                                 </div>
                          </div>
                          <div class="gmnoprint" controlwidth="59" controlheight="59"
                                 style="position: absolute; left: 10px; top: 11px;">
                                 <div
                                        style="width: 59px; height: 59px; overflow: hidden; position: relative;">
                                        <img src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"
                                              draggable="false"
                                              style="position: absolute; left: 0px; top: 0px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
                                              <div title="Obtiene una vista panorámica hacia la izquierda"
                                                     style="position: absolute; left: 0px; top: 20px; width: 19.6666666666667px; height: 19.6666666666667px; cursor: pointer;"></div>
                                              <div title="Obtiene una vista panorámica hacia la derecha"
                                                     style="position: absolute; left: 39px; top: 20px; width: 19.6666666666667px; height: 19.6666666666667px; cursor: pointer;"></div>
                                              <div title="Obtiene una vista panorámica hacia arriba"
                                                     style="position: absolute; left: 20px; top: 0px; width: 19.6666666666667px; height: 19.6666666666667px; cursor: pointer;"></div>
                                              <div title="Obtiene una vista panorámica hacia abajo"
                                                     style="position: absolute; left: 20px; top: 39px; width: 19.6666666666667px; height: 19.6666666666667px; cursor: pointer;"></div>
                                 </div>
                          </div>
                   </div>
                   <div controlwidth="32" controlheight="40"
                          style="cursor: url(http://maps.gstatic.com/mapfiles/openhand_8_8.cur) 8 8, default; position: absolute; left: 23px; top: 85px;">
                          <div
                                 style="width: 32px; height: 40px; overflow: hidden; position: absolute; left: 0px; top: 0px;">
                                 <img src="http://maps.gstatic.com/mapfiles/api-3/images/cb_scout2.png"
                                        draggable="false"
                                        style="position: absolute; left: -9px; top: -102px; width: 1028px; height: 214px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
                          </div>
                          <div
                                 style="width: 32px; height: 40px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;">
                                 <img src="http://maps.gstatic.com/mapfiles/api-3/images/cb_scout2.png"
                                        draggable="false"
                                        style="position: absolute; left: -107px; top: -102px; width: 1028px; height: 214px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
                          </div>
                          <div
                                 style="width: 32px; height: 40px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;">
                                 <img src="http://maps.gstatic.com/mapfiles/api-3/images/cb_scout2.png"
                                        draggable="false"
                                        style="position: absolute; left: -58px; top: -102px; width: 1028px; height: 214px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
                          </div>
                          <div
                                 style="width: 32px; height: 40px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;">
                                 <img src="http://maps.gstatic.com/mapfiles/api-3/images/cb_scout2.png"
                                        draggable="false"
                                        style="position: absolute; left: -205px; top: -102px; width: 1028px; height: 214px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
                          </div>
                   </div>
                   <div class="gmnoprint" controlwidth="0" controlheight="0"
                          style="opacity: 0.6; display: none; position: absolute;">
                          <div title="Girar el mapa 90 grados"
                                 style="width: 22px; height: 22px; overflow: hidden; position: absolute; cursor: pointer;">
                                 <img src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"
                                        draggable="false"
                                        style="position: absolute; left: -38px; top: -360px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
                          </div>
                   </div>
                   <div class="gmnoprint" controlwidth="25" controlheight="226"
                          style="position: absolute; left: 27px; top: 130px;">
                          <div title="Acerca la imagen"
                                 style="width: 23px; height: 24px; overflow: hidden; position: relative; cursor: pointer; z-index: 1;">
                                 <img src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"
                                        draggable="false"
                                        style="position: absolute; left: -17px; top: -400px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
                          </div>
                          <div title="Haz clic aquí para acercar o alejar la imagen"
                                 style="width: 25px; height: 178px; overflow: hidden; position: relative; cursor: pointer; top: -4px;">
                                 <img src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"
                                        draggable="false"
                                        style="position: absolute; left: -17px; top: -87px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
                          </div>
                          <div title="Arrastra para acercar o alejar la imagen"
                                 style="width: 21px; height: 14px; overflow: hidden; position: absolute; -webkit-transition: top 0.25s ease; transition: top 0.25s ease; z-index: 2; cursor: url(http://maps.gstatic.com/mapfiles/openhand_8_8.cur) 8 8, default; left: 2px; top: 60px;">
                                 <img src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"
                                        draggable="false"
                                        style="position: absolute; left: 0px; top: -384px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
                          </div>
                          <div title="Aleja la imagen"
                                 style="width: 23px; height: 23px; overflow: hidden; position: relative; cursor: pointer; top: -4px; z-index: 3;">
                                 <img src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"
                                        draggable="false"
                                        style="position: absolute; left: -17px; top: -361px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;">
                          </div>
                   </div>
             </div>
             <div class="gmnoprint"
                   style="margin: 5px; z-index: 0; position: absolute; cursor: pointer; right: 0px; top: 0px;">
                   <div class="gm-style-mtc" style="float: left;">
                          <div draggable="false" title="Muestra el callejero"
                                 style="direction: ltr; overflow: hidden; text-align: center; position: relative; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; -webkit-user-select: none; font-size: 11px; padding: 1px 6px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.14902); -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; min-width: 30px; font-weight: 500; background-color: rgb(255, 255, 255); background-clip: padding-box;">Mapa</div>
                          <div
                                 style="z-index: -1; padding-top: 2px; -webkit-background-clip: padding-box; border-width: 0px 1px 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: rgba(0, 0, 0, 0.14902); border-bottom-color: rgba(0, 0, 0, 0.14902); border-left-color: rgba(0, 0, 0, 0.14902); -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; position: absolute; left: 0px; top: 19px; text-align: left; display: none; background-color: white; background-clip: padding-box;">
                                 <div draggable="false"
                                        title="Aleja la imagen para mostrar el callejero con relieve."
                                        style="color: rgb(184, 184, 184); font-family: Roboto, Arial, sans-serif; -webkit-user-select: none; font-size: 11px; padding: 3px 8px 3px 3px; direction: ltr; text-align: left; white-space: nowrap; background-color: rgb(255, 255, 255);">
                                        <span role="checkbox"
                                              style="box-sizing: border-box; position: relative; line-height: 0; font-size: 0px; margin: 0px 5px 0px 0px; display: inline-block; border: 1px solid rgb(241, 241, 241); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; width: 13px; height: 13px; vertical-align: middle; background-color: rgb(255, 255, 255);">
                                              <div
                                                     style="position: absolute; left: 1px; top: -2px; width: 13px; height: 11px; overflow: hidden; display: none;">
                                                     <img src="http://maps.gstatic.com/mapfiles/mv/imgs8.png"
                                                            draggable="false"
                                                            style="position: absolute; left: -52px; top: -44px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; width: 68px; height: 67px;">
                                              </div>
                                        </span>
                                        <label style="vertical-align: middle; cursor: pointer;">Relieve</label>
                                 </div>
                          </div>
                   </div>
                   <div class="gm-style-mtc" style="float: left;">
                          <div draggable="false" title="Muestra las imágenes de satélite"
                                 style="direction: ltr; overflow: hidden; text-align: center; position: relative; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; -webkit-user-select: none; font-size: 11px; padding: 1px 6px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; -webkit-background-clip: padding-box; border-width: 1px 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: rgba(0, 0, 0, 0.14902); border-right-color: rgba(0, 0, 0, 0.14902); border-bottom-color: rgba(0, 0, 0, 0.14902); -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; min-width: 39px; background-color: rgb(255, 255, 255); background-clip: padding-box;">Satélite</div>
                          <div
                                 style="z-index: -1; padding-top: 2px; -webkit-background-clip: padding-box; border-width: 0px 1px 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: rgba(0, 0, 0, 0.14902); border-bottom-color: rgba(0, 0, 0, 0.14902); border-left-color: rgba(0, 0, 0, 0.14902); -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; position: absolute; right: 0px; top: 19px; text-align: left; display: none; background-color: white; background-clip: padding-box;">
                                 <div draggable="false"
                                        title="Acerca la imagen para mostrar la vista de 45 grados."
                                        style="color: rgb(184, 184, 184); font-family: Roboto, Arial, sans-serif; -webkit-user-select: none; font-size: 11px; padding: 3px 8px 3px 3px; direction: ltr; text-align: left; white-space: nowrap; display: none; background-color: rgb(255, 255, 255);">
                                        <span role="checkbox"
                                              style="box-sizing: border-box; position: relative; line-height: 0; font-size: 0px; margin: 0px 5px 0px 0px; display: inline-block; border: 1px solid rgb(241, 241, 241); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; width: 13px; height: 13px; vertical-align: middle; background-color: rgb(255, 255, 255);">
                                              <div
                                                     style="position: absolute; left: 1px; top: -2px; width: 13px; height: 11px; overflow: hidden; display: none;">
                                                     <img src="http://maps.gstatic.com/mapfiles/mv/imgs8.png"
                                                            draggable="false"
                                                            style="position: absolute; left: -52px; top: -44px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; width: 68px; height: 67px;">
                                              </div>
                                        </span>
                                        <label style="vertical-align: middle; cursor: pointer;">45°</label>
                                 </div>
                                 <div draggable="false"
                                        title="Muestra las imágenes con los nombres de las calles"
                                        style="color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; -webkit-user-select: none; font-size: 11px; padding: 3px 8px 3px 3px; direction: ltr; text-align: left; white-space: nowrap; background-color: rgb(255, 255, 255);">
                                        <span role="checkbox"
                                              style="box-sizing: border-box; position: relative; line-height: 0; font-size: 0px; margin: 0px 5px 0px 0px; display: inline-block; border: 1px solid rgb(198, 198, 198); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; width: 13px; height: 13px; vertical-align: middle; background-color: rgb(255, 255, 255);">
                                              <div
                                                     style="position: absolute; left: 1px; top: -2px; width: 13px; height: 11px; overflow: hidden;">
                                                     <img src="http://maps.gstatic.com/mapfiles/mv/imgs8.png"
                                                            draggable="false"
                                                            style="position: absolute; left: -52px; top: -44px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; width: 68px; height: 67px;">
                                              </div>
                                        </span>
                                        <label style="vertical-align: middle; cursor: pointer;">Etiquetas</label>
                                 </div>
                          </div>
                   </div>
             </div>
      </div>
      Div section with SmartGwt:

      Code:
      <div class="gm-style"
             style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
             <div
                   style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url(http://maps.gstatic.com/mapfiles/openhand_8_8.cur) 8 8, default;">
                   <div
                          style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;">
                                 <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
                                        <div style="position: absolute; left: 0px; top: 0px; z-index: 1;">
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: 509px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: 509px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: 509px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: 253px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: -3px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: -259px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: 509px;"></div>
                                              <div
                                                     style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: 509px;"></div>
                                        </div>
                                 </div>
                          </div>
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div>
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div>
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;"></div>
                          <div style="position: absolute; z-index: 0; left: 0px; top: 0px;">
                                 <div style="overflow: hidden;"></div>
                          </div>
                          <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
                                 <div style="position: absolute; left: 0px; top: 0px; z-index: 1;">
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: -3px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14717!3i29159!2m3!1e0!2sm!3i275300080!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: 253px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14717!3i29160!2m3!1e0!2sm!3i275300080!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: -3px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14716!3i29159!2m3!1e0!2sm!3i275298882!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: 253px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14716!3i29160!2m3!1e0!2sm!3i275298882!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: -3px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14718!3i29159!2m3!1e0!2sm!3i275300080!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: 253px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14718!3i29160!2m3!1e0!2sm!3i275300080!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: -259px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14717!3i29158!2m3!1e0!2sm!3i275298882!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 219px; top: 509px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14717!3i29161!2m3!1e0!2sm!3i275300080!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: 509px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14716!3i29161!2m3!1e0!2sm!3i275295971!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -37px; top: -259px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14716!3i29158!2m3!1e0!2sm!3i275298882!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: -259px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14718!3i29158!2m3!1e0!2sm!3i275298882!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 475px; top: 509px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt0.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14718!3i29161!2m3!1e0!2sm!3i275300080!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: 253px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14715!3i29160!2m3!1e0!2sm!3i275257107!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: 253px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14719!3i29160!2m3!1e0!2sm!3i275300346!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: -3px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14719!3i29159!2m3!1e0!2sm!3i275300346!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: -3px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14715!3i29159!2m3!1e0!2sm!3i275254737!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: -259px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14719!3i29158!2m3!1e0!2sm!3i275298753!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: -259px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14715!3i29158!2m3!1e0!2sm!3i275254737!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: -293px; top: 509px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14715!3i29161!2m3!1e0!2sm!3i275295971!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                        <div
                                              style="width: 256px; height: 256px; -webkit-transform: translateZ(0px); position: absolute; left: 731px; top: 509px; opacity: 1; transition: opacity 200ms ease-out; -webkit-transition: opacity 200ms ease-out;">
                                              <img
                                                     src="http://mt1.googleapis.com/vt?pb=!1m4!1m3!1i16!2i14719!3i29161!2m3!1e0!2sm!3i275300346!3m9!2ses-ES!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0!20m1!1b1"
                                                     draggable="false"
                                                     style="width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; -webkit-transform: translateZ(0px);">
                                        </div>
                                 </div>
                          </div>
                   </div>
                   <div
                          style="position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: 100%;"></div>
                   <div
                          style="position: absolute; left: 0px; top: 0px; z-index: 3; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"></div>
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div>
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"></div>
                          <div
                                 style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div>
                   </div>
             </div>
      </div>

      Comment


        #4
        This is, to say the least, a surprising finding - we would definitely recommend double-checking your results since, re-examining your test code, your map isn't even contained inside a SmartGWT widget, which implies that the Google Maps code is somehow influenced by the presence of the JavaScript code that SmartGWT loads, and it's hard to come up a plausible mechanism by which that could happen.

        If you decide that's really going on, probably your best course of action is to file a bug against the GoogleMap widget, since it seems to be sensitive to the presence of well-behaved JavaScript libraries.

        Comment


          #5
          Hi,

          I don't know which library you are using, but we successfully use GMaps v3 with SmartGWT with this library:
          https://github.com/branflake2267/GWT-Maps-V3-Api

          We use the MapWidget from this library ( com.google.gwt.maps.client.WapWidget) which can be constructed with MapOptions, and added to a smartgwt layout, which makes it behave as expected. You only need to wire some listeners to make the widget resize when the SmartGWT layout changes size (use the triggerResize() method of the MapWidget when you notice a change in size of the containing widget).

          Hope this helps.
          ITB

          Comment


            #6
            Originally posted by Isomorphic View Post
            This is, to say the least, a surprising finding - we would definitely recommend double-checking your results since, re-examining your test code, your map isn't even contained inside a SmartGWT widget, which implies that the Google Maps code is somehow influenced by the presence of the JavaScript code that SmartGWT loads, and it's hard to come up a plausible mechanism by which that could happen.

            If you decide that's really going on, probably your best course of action is to file a bug against the GoogleMap widget, since it seems to be sensitive to the presence of well-behaved JavaScript libraries.
            Yes, you are absolutely right, the map is not even contained inside an SmartGwt container. It is just the inclusion of the inheritance from Smartgwt that causes the problem.

            And yes I'm also surprised by this findings. I didn't believe it when the programmer brought it to my attention so I have already double checked it.

            Would it be possible for someone to try to replicate it?

            I haven't had this situation with other frameworks so I'm very confused.

            Comment


              #7
              Originally posted by itb View Post
              Hi,

              I don't know which library you are using, but we successfully use GMaps v3 with SmartGWT with this library:
              https://github.com/branflake2267/GWT-Maps-V3-Api

              We use the MapWidget from this library ( com.google.gwt.maps.client.WapWidget) which can be constructed with MapOptions, and added to a smartgwt layout, which makes it behave as expected. You only need to wire some listeners to make the widget resize when the SmartGWT layout changes size (use the triggerResize() method of the MapWidget when you notice a change in size of the containing widget).

              Hope this helps.
              ITB
              I have tried it inside an SmartGwt widget, of course unsuccesfully, so that is why I took it outside any component and just added the inheritance at the xml file. It didn't help.

              I'm going to take a look to the release.

              Maybe, abussing your kindness, it would be great if you had an example of your code to share.

              At anyhow best regards from Mexico

              Comment


                #8
                Unfortunately, even if we replicated it, we would not start down the road of troubleshooting how this particular third-party codebase could somehow break itself in the presence of another (again, well-behaved) JavaScript library. So this is still a bug to file with another team.

                Comment


                  #9
                  Here's a stripped version of our MapView. It's placed on a SmartGWT VLayout, which can be placed anywhere you want in another layout. We use it on a tabbed pane, and it behaves as expected (hidden when tab deselected, visible when selected).

                  Code:
                  import com.google.gwt.maps.client.MapOptions;
                  import com.google.gwt.maps.client.MapTypeId;
                  import com.google.gwt.maps.client.MapWidget;
                  import com.google.gwt.maps.client.base.LatLng;
                  import com.smartgwt.client.widgets.events.ResizedEvent;
                  import com.smartgwt.client.widgets.events.ResizedHandler;
                  import com.smartgwt.client.widgets.layout.VLayout;
                  
                  public class SampleMapView extends VLayout {
                      private MapWidget map = null;
                      
                      public SampleMapView() {
                          this.createMap();
                          this.setHeight100();
                          this.setWidth100();
                          this.addMember(this.map);
                          this.addResizedHandler(new ResizedHandler() {
                              @Override
                              public void onResized(final ResizedEvent event) {
                                  SampleMapView.this.map.triggerResize();
                              }
                          });
                      }
                      
                      private void createMap() {
                          MapOptions options = MapOptions.newInstance();
                          options.setZoom(8);
                          options.setCenter(LatLng.newInstance(50d, 30d));//just somewhere, use your own
                          options.setZoomControl(true);
                          options.setMapTypeControl(true);
                          options.setPanControl(true);
                          options.setScrollWheel(true);
                          options.setStreetViewControl(true);
                          options.setMapTypeId(MapTypeId.ROADMAP);
                          this.map = new MapWidget(options);
                          this.map.setHeight("100%");
                          this.map.setWidth("100%");
                      }
                      
                      public void onWindowResized() {
                          this.map.triggerResize();
                      }
                  }

                  Comment


                    #10
                    Can't make it work

                    Originally posted by itb View Post
                    Here's a stripped version of our MapView. It's placed on a SmartGWT VLayout, which can be placed anywhere you want in another layout. We use it on a tabbed pane, and it behaves as expected (hidden when tab deselected, visible when selected).

                    Code:
                    import com.google.gwt.maps.client.MapOptions;
                    import com.google.gwt.maps.client.MapTypeId;
                    import com.google.gwt.maps.client.MapWidget;
                    import com.google.gwt.maps.client.base.LatLng;
                    import com.smartgwt.client.widgets.events.ResizedEvent;
                    import com.smartgwt.client.widgets.events.ResizedHandler;
                    import com.smartgwt.client.widgets.layout.VLayout;
                    
                    public class SampleMapView extends VLayout {
                        private MapWidget map = null;
                        
                        public SampleMapView() {
                            this.createMap();
                            this.setHeight100();
                            this.setWidth100();
                            this.addMember(this.map);
                            this.addResizedHandler(new ResizedHandler() {
                                @Override
                                public void onResized(final ResizedEvent event) {
                                    SampleMapView.this.map.triggerResize();
                                }
                            });
                        }
                        
                        private void createMap() {
                            MapOptions options = MapOptions.newInstance();
                            options.setZoom(8);
                            options.setCenter(LatLng.newInstance(50d, 30d));//just somewhere, use your own
                            options.setZoomControl(true);
                            options.setMapTypeControl(true);
                            options.setPanControl(true);
                            options.setScrollWheel(true);
                            options.setStreetViewControl(true);
                            options.setMapTypeId(MapTypeId.ROADMAP);
                            this.map = new MapWidget(options);
                            this.map.setHeight("100%");
                            this.map.setWidth("100%");
                        }
                        
                        public void onWindowResized() {
                            this.map.triggerResize();
                        }
                    }
                    Hi again!

                    Thanks for the reply and the exmaple, i just try it in a new GWT project with the last version of smartgwt in it. Unfortunately I got the same issue, but the console showed me an error:

                    11:56:37.251 [ERROR] [googlemapstest] 11:56:37.249:WARN:Log:TypeError: undefined is not a function
                    Stack from error.stack:
                    HTMLCollection.map(<no args: exited>) @ ISC_Core.js:422:105
                    com.smartgwt.client.core.JsObject$SGWT_WARN: 11:56:37.249:WARN:Log:TypeError: undefined is not a function
                    Stack from error.stack:
                    HTMLCollection.map(<no args: exited>) @ ISC_Core.js:422:105
                    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
                    at sun.reflect.NativeConstructorAccessorImpl.newInstance(Unknown Source)
                    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(Unknown Source)
                    at java.lang.reflect.Constructor.newInstance(Unknown Source)
                    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:105)
                    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
                    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
                    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:293)
                    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:547)
                    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:364)
                    at java.lang.Thread.run(Unknown Source)

                    Comment


                      #11
                      Can you tell me what is wrong?

                      I attached the files i use to run my test, i hope you guys can help me to find what i'm doing wrong.

                      Thanks in advance!
                      Attached Files

                      Comment


                        #12
                        You should check the script tags in your html file. We explicitly download the smartGWT core js and the google maps js file there. Might explain why you get "undefined" methods.

                        Comment


                          #13
                          It's possible these issues have been created by a problem in Google Maps we've now worked around. It would be great if one of you can confirm that our workaround helps your situation too.

                          Comment


                            #14
                            Originally posted by Isomorphic View Post
                            It's possible these issues have been created by a problem in Google Maps we've now worked around. It would be great if one of you can confirm that our workaround helps your situation too.
                            Just as note: The OP is using "SmartClient Version: SC_SNAPSHOT-2011-08-02/LGPL Development Only (built 2011-08-02)", so most likely Smart GWT 2.4 or 2.5.

                            Best regards,
                            Blama

                            Comment


                              #15
                              Good point. This change was backported only as far as 3.1 and won't be backported further - upgrade if you need this functionality, you need to anyway for modern browser support if nothing else.

                              Comment

                              Working...
                              X