[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