[Resolvido] Dúvida -- Utilizando google maps nos GSP.
29/04/2010 00:00
0
Fala pessoal,

estou iniciando em Grails e estou seguindo um tutorial muito interessante do Scott Davis (Mastering Grails - <!-- m --><a class="postlink" href="http://www.ibm.com/developerworks/views/java/libraryview.jsp?site_id=1&amp;contentarea_by=Java&amp;sort_by=Date&amp;sort_order=1&amp;start=1&amp;end=19&amp;topic_by=&amp;product_by=&amp;type_by=All%20Types&amp;show_abstract=true&amp;search_by=mastering%20grails">http://www.ibm.com/developerworks/views ... g%20grails</a><!-- m -->)

O problema é que estou enfrentando um comportamento estranho e nao estou vendo a solução.

Vamos aos detalhamentos.

Tenho esse POGO, controlador, view, etc.. tudo funcionando perfeitamente.



o GSP correspondente é o seguinte


<html xmlns=&quot;http&#58;//www.w3.org/1999/xhtml&quot;>
  <head>
    <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;/>
	<meta name=&quot;layout&quot; content=&quot;main&quot; />
    
    <g&#58;set var=&quot;entityName&quot; value=&quot;${message(code&#58; 'airport.label', default&#58; 'Airport')}&quot; />
    <title><g&#58;message code=&quot;default.list.label&quot; args=&quot;[entityName]&quot; /></title>
  </head>
  <body>
    <div class=&quot;nav&quot;>
            <span class=&quot;menuButton&quot;><a class=&quot;home&quot; href=&quot;${createLink(uri&#58; '/')}&quot;>Home</a></span>
            <span class=&quot;menuButton&quot;><g&#58;link class=&quot;create&quot; action=&quot;create&quot;><g&#58;message code=&quot;default.new.label&quot; args=&quot;[entityName]&quot; /></g&#58;link></span>
   	</div>
    <div class=&quot;body&quot;>
            <h1><g&#58;message code=&quot;default.list.label&quot; args=&quot;[entityName]&quot; /></h1>
            <g&#58;if test=&quot;${flash.message}&quot;>
            	<div class=&quot;message&quot;>${flash.message}</div>
            </g&#58;if>
           	<div class=&quot;list&quot;>
                <table>
                    <thead>
                        <tr>
                            <g&#58;sortableColumn property=&quot;name&quot; title=&quot;${message(code&#58; 'airport.name.label', default&#58; 'Name')}&quot; />
                            <g&#58;sortableColumn property=&quot;iata&quot; title=&quot;${message(code&#58; 'airport.iata.label', default&#58; 'Iata')}&quot; />
                            <g&#58;sortableColumn property=&quot;city&quot; title=&quot;${message(code&#58; 'airport.city.label', default&#58; 'City')}&quot; />
                            <g&#58;sortableColumn property=&quot;state&quot; title=&quot;${message(code&#58; 'airport.state.label', default&#58; 'State')}&quot; />
                             <g&#58;sortableColumn property=&quot;country&quot; title=&quot;${message(code&#58; 'airport.country.label', default&#58; 'Country')}&quot; />
                        </tr>
                    </thead>
                    <tbody>
                    <g&#58;each in=&quot;${airportInstanceList}&quot; status=&quot;i&quot; var=&quot;airportInstance&quot;>
                        <tr class=&quot;${(i % 2) == 0 ? 'odd' &#58; 'even'}&quot;>
                            <td><g&#58;link action=&quot;show&quot; id=&quot;${airportInstance.id}&quot;>${fieldValue(bean&#58; airportInstance, field&#58; &quot;name&quot;)}</g&#58;link></td>
                            <td>${fieldValue(bean&#58; airportInstance, field&#58; &quot;iata&quot;)}</td>
                            <td>${fieldValue(bean&#58; airportInstance, field&#58; &quot;city&quot;)}</td>
                            <td>${fieldValue(bean&#58; airportInstance, field&#58; &quot;state&quot;)}</td>
                            <td>${fieldValue(bean&#58; airportInstance, field&#58; &quot;country&quot;)}</td>
                        </tr>
                    </g&#58;each>
                    </tbody>
                </table>
            </div>
            <div class=&quot;paginateButtons&quot;>
                <g&#58;paginate total=&quot;${airportInstanceTotal}&quot; />
            </div>
            <g&#58;render template=&quot;/footer&quot; />
        </div>
  </body>
</html>



e também tenho este GSP para o mapa com a localização de cada aeroporto




<html xmlns=&quot;http&#58;//www.w3.org/1999/xhtml&quot;>
	<head>
		<meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;/>
		<title>Google Maps JavaScript API Example</title>
		<script src=&quot;http&#58;//maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=true&amp;amp;key=minhachave&quot; type=&quot;text/javascript&quot;></script>
		<script type=&quot;text/javascript&quot;>
			var usCenterPoint = new GLatLng(-25.528475, -49.175775)
			var usZoom = 5

			function load() {
			  if (GBrowserIsCompatible()) {
				var map = new GMap2(document.getElementById(&quot;map&quot;));
				map.setCenter(usCenterPoint, usZoom);
				map.addControl(new GLargeMapControl());
				map.addControl(new GMapTypeControl());
				<g&#58;each in=&quot;${airportList}&quot; status=&quot;i&quot; var=&quot;airport&quot; >
					var point${airport.id} = new GLatLng(${airport.lat}, ${airport.lng})
					var marker${airport.id} = new GMarker(point${airport.id})
					marker${airport.id}.bindInfoWindowHtml(&quot;${airport.name}<br/>${airport.iata}&quot;)
					map.addOverlay(marker${airport.id})
				</g&#58;each>
			  }
			}
		</script>
	</head>
	
	<body onload=&quot;load()&quot; onunload=&quot;GUnload()&quot;>
		<div id=&quot;map&quot; style=&quot;width&#58; 800px; height&#58; 400px&quot;></div>
	</body>
</html>



o que eu quero, é ter esse mapa sendo mostrado na juntamente com a lista de aeroportos.

mas quando eu insiro o codigo do mapa no GSP da lista, ocorre o seguinte.



eis o GSP


<html xmlns=&quot;http&#58;//www.w3.org/1999/xhtml&quot;>
	<head>
		<meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;/>
		<meta name=&quot;layout&quot; content=&quot;main&quot; />
		<g&#58;set var=&quot;entityName&quot; value=&quot;${message(code&#58; 'airport.label', default&#58; 'Airport')}&quot; />
		 <title><g&#58;message code=&quot;default.list.label&quot; args=&quot;[entityName]&quot; /></title>
		
		<script src=&quot;http&#58;//maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=true&amp;amp;key=minhaKey&quot; type=&quot;text/javascript&quot;></script>
		<script type=&quot;text/javascript&quot;>
			var usCenterPoint = new GLatLng(-25.528475, -49.175775)
			var usZoom = 5
			
			function load() {
				
			  if (GBrowserIsCompatible()) {
				var map = new GMap2(document.getElementById(&quot;map&quot;));
				map.setCenter(usCenterPoint, usZoom);
				map.addControl(new GLargeMapControl());
				map.addControl(new GMapTypeControl());
		
				
				<g&#58;each in=&quot;${airportInstanceList}&quot; status=&quot;i&quot; var=&quot;airport&quot; >
					var point${airport.id} = new GLatLng(${airport.lat}, ${airport.lng})
					var marker${airport.id} = new GMarker(point${airport.id})
					marker${airport.id}.bindInfoWindowHtml(&quot;${airport.name}<br/>${airport.iata}&quot;)
					map.addOverlay(marker${airport.id})
				</g&#58;each>
			  }
			}
	   
		</script>
	</head>
	
	<body onload=&quot;load()&quot; onunload=&quot;GUnload()&quot;>
		<div class=&quot;nav&quot;>
				<span class=&quot;menuButton&quot;><a class=&quot;home&quot; href=&quot;${createLink(uri&#58; '/')}&quot;>Home</a></span>
				<span class=&quot;menuButton&quot;><g&#58;link class=&quot;create&quot; action=&quot;create&quot;><g&#58;message code=&quot;default.new.label&quot; args=&quot;[entityName]&quot; /></g&#58;link></span>
		</div>
    
		<div class=&quot;body&quot;>
            <h1><g&#58;message code=&quot;default.list.label&quot; args=&quot;[entityName]&quot; /></h1>
            <g&#58;if test=&quot;${flash.message}&quot;>
            	<div class=&quot;message&quot;>${flash.message}</div>
            </g&#58;if>
            <div class=&quot;list&quot;>
                <table>
                    <thead>
                        <tr>
                            <g&#58;sortableColumn property=&quot;name&quot; title=&quot;${message(code&#58; 'airport.name.label', default&#58; 'Name')}&quot; />
                            <g&#58;sortableColumn property=&quot;iata&quot; title=&quot;${message(code&#58; 'airport.iata.label', default&#58; 'Iata')}&quot; />
                            <g&#58;sortableColumn property=&quot;city&quot; title=&quot;${message(code&#58; 'airport.city.label', default&#58; 'City')}&quot; />
                            <g&#58;sortableColumn property=&quot;state&quot; title=&quot;${message(code&#58; 'airport.state.label', default&#58; 'State')}&quot; />
                            <g&#58;sortableColumn property=&quot;country&quot; title=&quot;${message(code&#58; 'airport.country.label', default&#58; 'Country')}&quot; />
                        </tr>
                    </thead>
                    <tbody>
                    <g&#58;each in=&quot;${airportInstanceList}&quot; status=&quot;i&quot; var=&quot;airportInstance&quot;>
                        <tr class=&quot;${(i % 2) == 0 ? 'odd' &#58; 'even'}&quot;>
                            <td><g&#58;link action=&quot;show&quot; id=&quot;${airportInstance.id}&quot;>${fieldValue(bean&#58; airportInstance, field&#58; &quot;name&quot;)}</g&#58;link></td>
                            <td>${fieldValue(bean&#58; airportInstance, field&#58; &quot;iata&quot;)}</td>
                            <td>${fieldValue(bean&#58; airportInstance, field&#58; &quot;city&quot;)}</td>
                            <td>${fieldValue(bean&#58; airportInstance, field&#58; &quot;state&quot;)}</td>
                            <td>${fieldValue(bean&#58; airportInstance, field&#58; &quot;country&quot;)}</td>
                        </tr>
                    </g&#58;each>
                    </tbody>
                </table>
            </div>
            <div id=&quot;map&quot; style=&quot;width&#58; 600px; height&#58; 400px&quot;></div>
            <div class=&quot;paginateButtons&quot;>
                <g&#58;paginate total=&quot;${airportInstanceTotal}&quot; />
            </div>
            <g&#58;render template=&quot;/footer&quot; />
        </div>
	</body>
</html>



e eu percebi que se eu tirar o &quot;<meta name=&quot;layout&quot; content=&quot;main&quot; />&quot; do GSP, o mapa aparece, porem sem toda a formatação desejada.



esse é o problema.. como mostar o mapa E continuar com a formatação?

segue os códigos do layout main.gsp e do main.css


<html>
    <head>
        <title><g&#58;layoutTitle default=&quot;Grails&quot; /></title>
        <link rel=&quot;stylesheet&quot; href=&quot;${resource(dir&#58;'css',file&#58;'main.css')}&quot; />
        <link rel=&quot;shortcut icon&quot; href=&quot;${resource(dir&#58;'images',file&#58;'favicon.ico')}&quot; type=&quot;image/x-icon&quot; />
        <g&#58;layoutHead />
        <g&#58;javascript library=&quot;application&quot; />
    </head>
    <body>
        <div id=&quot;spinner&quot; class=&quot;spinner&quot; style=&quot;display&#58;none;&quot;>
            <img src=&quot;${resource(dir&#58;'images',file&#58;'spinner.gif')}&quot; alt=&quot;Spinner&quot; />
        </div>
        <div id=&quot;grailsLogo&quot; class=&quot;logo&quot;><a href=&quot;http&#58;//grails.org&quot;><img src=&quot;${resource(dir&#58;'images',file&#58;'grails_logo.png')}&quot; alt=&quot;Grails&quot; border=&quot;0&quot; /></a></div>
        <g&#58;layoutBody />
    </body>
</html>



html * {
    margin&#58; 0;
    /*padding&#58; 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
}
/* GENERAL */
.spinner {
    padding&#58; 5px;
    position&#58; absolute;
    right&#58; 0;
}
body {
    background&#58; #fff;
    color&#58; #333;
    font&#58; 11px verdana, arial, helvetica, sans-serif;
}
#grailsLogo {
	padding&#58;20px;
}
a&#58;link, a&#58;visited, a&#58;hover {
    color&#58; #666;
    font-weight&#58; bold;
    text-decoration&#58; none;
}
h1 {
    color&#58; #48802c;
    font-weight&#58; normal;
    font-size&#58; 16px;
    margin&#58; .8em 0 .3em 0;
}
ul {
    padding-left&#58; 15px;
}
input, select, textarea {
    background-color&#58; #fcfcfc;
    border&#58; 1px solid #ccc;
    font&#58; 11px verdana, arial, helvetica, sans-serif;
    margin&#58; 2px 0;
    padding&#58; 2px 4px;
}
select {
   padding&#58; 2px 2px 2px 0;
}
textarea {
	width&#58; 250px;
	height&#58; 150px;
	vertical-align&#58; top;
}
input&#58;focus, select&#58;focus, textarea&#58;focus {
    border&#58; 1px solid #b2d1ff;
}
.body {
    float&#58; left;
    margin&#58; 0 15px 10px 15px;
}
/* NAVIGATION MENU */
.nav {
    background&#58; #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border&#58; 1px solid #ccc;
    border-style&#58; solid none solid none;
    margin-top&#58; 5px;
    padding&#58; 7px 12px;
}
.menuButton {
    font-size&#58; 10px;
    padding&#58; 0 5px;
}
.menuButton a {
    color&#58; #333;
    padding&#58; 4px 6px;
}
.menuButton a.home {
    background&#58; url(../images/skin/house.png) center left no-repeat;
    color&#58; #333;
    padding-left&#58; 25px;
}
.menuButton a.list {
    background&#58; url(../images/skin/database_table.png) center left no-repeat;
    color&#58; #333;
    padding-left&#58; 25px;
}
.menuButton a.create {
    background&#58; url(../images/skin/database_add.png) center left no-repeat;
    color&#58; #333;
    padding-left&#58; 25px;
}
/* MESSAGES AND ERRORS */
.message {
    background&#58; #f3f8fc url(../images/skin/information.png) 8px 50% no-repeat;
    border&#58; 1px solid #b2d1ff;
    color&#58; #006dba;
    margin&#58; 10px 0 5px 0;
    padding&#58; 5px 5px 5px 30px
}
div.errors {
    background&#58; #fff3f3;
    border&#58; 1px solid red;
    color&#58; #cc0000;
    margin&#58; 10px 0 5px 0;
    padding&#58; 5px 0 5px 0;
}
div.errors ul {
    list-style&#58; none;
    padding&#58; 0;
}
div.errors li {
	background&#58; url(../images/skin/exclamation.png) 8px 0% no-repeat;
    line-height&#58; 16px;
    padding-left&#58; 30px;
}
td.errors select {
    border&#58; 1px solid red;
}
td.errors input {
    border&#58; 1px solid red;
}
/* TABLES */
table {
    border&#58; 1px solid #ccc;
    width&#58; 100%
}
tr {
    border&#58; 0;
}
td, th {
    font&#58; 11px verdana, arial, helvetica, sans-serif;
    line-height&#58; 12px;
    padding&#58; 5px 6px;
    text-align&#58; left;
    vertical-align&#58; top;
}
th {
    background&#58; #fff url(../images/skin/shadow.jpg);
    color&#58; #666;
    font-size&#58; 11px;
    font-weight&#58; bold;
    line-height&#58; 17px;
    padding&#58; 2px 6px;
}
th a&#58;link, th a&#58;visited, th a&#58;hover {
    color&#58; #333;
    display&#58; block;
    font-size&#58; 10px;
    text-decoration&#58; none;
    width&#58; 100%;
}
th.asc a, th.desc a {
    background-position&#58; right;
    background-repeat&#58; no-repeat;
}
th.asc a {
    background-image&#58; url(../images/skin/sorted_asc.gif);
}
th.desc a {
    background-image&#58; url(../images/skin/sorted_desc.gif);
}

.odd {
    background&#58; #f7f7f7;
}
.even {
    background&#58; #fff;
}
/* LIST */
.list table {
    border-collapse&#58; collapse;
}
.list th, .list td {
    border-left&#58; 1px solid #ddd;
}
.list th&#58;hover, .list tr&#58;hover {
    background&#58; #b2d1ff;
}
/* PAGINATION */
.paginateButtons {
    background&#58; #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border&#58; 1px solid #ccc;
    border-top&#58; 0;
    color&#58; #666;
    font-size&#58; 10px;
    overflow&#58; hidden;
    padding&#58; 10px 3px;
}
.paginateButtons a {
    background&#58; #fff;
    border&#58; 1px solid #ccc;
    border-color&#58; #ccc #aaa #aaa #ccc;
    color&#58; #666;
    margin&#58; 0 3px;
    padding&#58; 2px 6px;
}
.paginateButtons span {
    padding&#58; 2px 3px;
}
/* DIALOG */
.dialog table {
    padding&#58; 5px 0;
}
.prop {
    padding&#58; 5px;
}
.prop .name {
    text-align&#58; left;
    width&#58; 15%;
    white-space&#58; nowrap;
}
.prop .value {
    text-align&#58; left;
    width&#58; 85%;
}
/* ACTION BUTTONS */
.buttons {
    background&#58; #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border&#58; 1px solid #ccc;
    color&#58; #666;
    font-size&#58; 10px;
    margin-top&#58; 5px;
    overflow&#58; hidden;
    padding&#58; 0;
}
.buttons input {
    background&#58; #fff;
    border&#58; 0;
    color&#58; #333;
    cursor&#58; pointer;
    font-size&#58; 10px;
    font-weight&#58; bold;
    margin-left&#58; 3px;
    overflow&#58; visible;
    padding&#58; 2px 6px;
}
.buttons input.delete {
    background&#58; transparent url(../images/skin/database_delete.png) 5px 50% no-repeat;
    padding-left&#58; 28px;
}
.buttons input.edit {
    background&#58; transparent url(../images/skin/database_edit.png) 5px 50% no-repeat;
    padding-left&#58; 28px;
}
.buttons input.save {
    background&#58; transparent url(../images/skin/database_save.png) 5px 50% no-repeat;
    padding-left&#58; 28px;
}


Sorry pelo post grande.. mas tentei dar o maximo de informação possivel. <!-- s:) --><img src="{SMILIES_PATH}/icon_smile.gif" alt=":)" title="Smile" /><!-- s:) -->

desde já agradeco a ajuda.
Tags: Grails


0
problema resolvido! <!-- s:mrgreen: --><img src="{SMILIES_PATH}/icon_mrgreen.gif" alt=":mrgreen:" title="Mr. Green" /><!-- s:mrgreen: -->


depois de testar vaaaarias vezes.. e verificar o codigo fonte html gerado.. descobri que o problema estava no main.gsp


<html>
    <head>
        <title><g&#58;layoutTitle default=&quot;Grails&quot; /></title>
        <link rel=&quot;stylesheet&quot; href=&quot;${resource(dir&#58;'css',file&#58;'main.css')}&quot; />
        <link rel=&quot;shortcut icon&quot; href=&quot;${resource(dir&#58;'images',file&#58;'favicon.ico')}&quot; type=&quot;image/x-icon&quot; />
        <g&#58;layoutHead />
        <g&#58;javascript library=&quot;application&quot; />
    </head>
    <body>
        <div id=&quot;spinner&quot; class=&quot;spinner&quot; style=&quot;display&#58;none;&quot;>
            <img src=&quot;${resource(dir&#58;'images',file&#58;'spinner.gif')}&quot; alt=&quot;Spinner&quot; />
        </div>
        <g&#58;layoutBody />
    </body>
</html>


quando eu incorporava esse layout ao gsp original, a tag <body> </body> era reescrita perdendo as configurações <body onload=&quot;load()&quot; onunload=&quot;GUnload()&quot;>.

Como não ocorria o load(), o mapa nao aparecia.

resolvi colocando um &quot;onload=&quot;${pageProperty(name:'body.onload')}&quot; onunload=&quot;&quot;${pageProperty(name:'body.onunload')}&quot;&quot;&quot; no body no main.gsp


...
<body onload=&quot;${pageProperty(name&#58;'body.onload')}&quot; onunload=&quot;&quot;${pageProperty(name&#58;'body.onunload')}&quot;&quot;>
        <div id=&quot;spinner&quot; class=&quot;spinner&quot; style=&quot;display&#58;none;&quot;>
            <img src=&quot;${resource(dir&#58;'images',file&#58;'spinner.gif')}&quot; alt=&quot;Spinner&quot; />
        </div>
        <g&#58;layoutBody />
    </body>
...


tudo funcionando agora. <!-- s8) --><img src="{SMILIES_PATH}/icon_cool.gif" alt="8)" title="Cool" /><!-- s8) -->

fica a dica pra quem utilizar layouts, atentar para as tags que são sobrescritas. <!-- s:roll: --><img src="{SMILIES_PATH}/icon_rolleyes.gif" alt=":roll:" title="Rolling Eyes" /><!-- s:roll: -->
03/05/2010 00:00


Ainda não faz parte da comunidade???

Para se registrar, clique aqui.


Aprenda Groovy e Grails com a Formação itexto!

Newsletter Semana Groovy

Assinar

Envie seu link!


Livro de Grails


/dev/All

Os melhores blogs de TI (e em português) em um único lugar!

 
Creative Commons
RSS Grails Brasil é mantido por itexto Consultoria.
Em caso de problemas contacte Henrique Lobo Weissmann (Kico) por e-mail: kico@itexto.com.br
Todo o conteúdo presente neste site adota o Creative Commons como licença padrão.
Ver: 4.14.0
itexto