[Resolvido] Dúvida -- Utilizando google maps nos GSP.
29/04/2010 00:00
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="layout" content="main" />
<g:set var="entityName" value="${message(code: 'airport.label', default: 'Airport')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<body>
<div class="nav">
<span class="menuButton"><a class="home" href="${createLink(uri: '/')}">Home</a></span>
<span class="menuButton"><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></span>
</div>
<div class="body">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<g:if test="${flash.message}">
<div class="message">${flash.message}</div>
</g:if>
<div class="list">
<table>
<thead>
<tr>
<g:sortableColumn property="name" title="${message(code: 'airport.name.label', default: 'Name')}" />
<g:sortableColumn property="iata" title="${message(code: 'airport.iata.label', default: 'Iata')}" />
<g:sortableColumn property="city" title="${message(code: 'airport.city.label', default: 'City')}" />
<g:sortableColumn property="state" title="${message(code: 'airport.state.label', default: 'State')}" />
<g:sortableColumn property="country" title="${message(code: 'airport.country.label', default: 'Country')}" />
</tr>
</thead>
<tbody>
<g:each in="${airportInstanceList}" status="i" var="airportInstance">
<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
<td><g:link action="show" id="${airportInstance.id}">${fieldValue(bean: airportInstance, field: "name")}</g:link></td>
<td>${fieldValue(bean: airportInstance, field: "iata")}</td>
<td>${fieldValue(bean: airportInstance, field: "city")}</td>
<td>${fieldValue(bean: airportInstance, field: "state")}</td>
<td>${fieldValue(bean: airportInstance, field: "country")}</td>
</tr>
</g:each>
</tbody>
</table>
</div>
<div class="paginateButtons">
<g:paginate total="${airportInstanceTotal}" />
</div>
<g:render template="/footer" />
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=minhachave" type="text/javascript"></script>
<script type="text/javascript">
var usCenterPoint = new GLatLng(-25.528475, -49.175775)
var usZoom = 5
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(usCenterPoint, usZoom);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
<g:each in="${airportList}" status="i" var="airport" >
var point${airport.id} = new GLatLng(${airport.lat}, ${airport.lng})
var marker${airport.id} = new GMarker(point${airport.id})
marker${airport.id}.bindInfoWindowHtml("${airport.name}<br/>${airport.iata}")
map.addOverlay(marker${airport.id})
</g:each>
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 400px"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="layout" content="main" />
<g:set var="entityName" value="${message(code: 'airport.label', default: 'Airport')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=minhaKey" type="text/javascript"></script>
<script type="text/javascript">
var usCenterPoint = new GLatLng(-25.528475, -49.175775)
var usZoom = 5
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(usCenterPoint, usZoom);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
<g:each in="${airportInstanceList}" status="i" var="airport" >
var point${airport.id} = new GLatLng(${airport.lat}, ${airport.lng})
var marker${airport.id} = new GMarker(point${airport.id})
marker${airport.id}.bindInfoWindowHtml("${airport.name}<br/>${airport.iata}")
map.addOverlay(marker${airport.id})
</g:each>
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div class="nav">
<span class="menuButton"><a class="home" href="${createLink(uri: '/')}">Home</a></span>
<span class="menuButton"><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></span>
</div>
<div class="body">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<g:if test="${flash.message}">
<div class="message">${flash.message}</div>
</g:if>
<div class="list">
<table>
<thead>
<tr>
<g:sortableColumn property="name" title="${message(code: 'airport.name.label', default: 'Name')}" />
<g:sortableColumn property="iata" title="${message(code: 'airport.iata.label', default: 'Iata')}" />
<g:sortableColumn property="city" title="${message(code: 'airport.city.label', default: 'City')}" />
<g:sortableColumn property="state" title="${message(code: 'airport.state.label', default: 'State')}" />
<g:sortableColumn property="country" title="${message(code: 'airport.country.label', default: 'Country')}" />
</tr>
</thead>
<tbody>
<g:each in="${airportInstanceList}" status="i" var="airportInstance">
<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
<td><g:link action="show" id="${airportInstance.id}">${fieldValue(bean: airportInstance, field: "name")}</g:link></td>
<td>${fieldValue(bean: airportInstance, field: "iata")}</td>
<td>${fieldValue(bean: airportInstance, field: "city")}</td>
<td>${fieldValue(bean: airportInstance, field: "state")}</td>
<td>${fieldValue(bean: airportInstance, field: "country")}</td>
</tr>
</g:each>
</tbody>
</table>
</div>
<div id="map" style="width: 600px; height: 400px"></div>
<div class="paginateButtons">
<g:paginate total="${airportInstanceTotal}" />
</div>
<g:render template="/footer" />
</div>
</body>
</html>
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
<link rel="shortcut icon" href="${resource(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
<g:layoutHead />
<g:javascript library="application" />
</head>
<body>
<div id="spinner" class="spinner" style="display:none;">
<img src="${resource(dir:'images',file:'spinner.gif')}" alt="Spinner" />
</div>
<div id="grailsLogo" class="logo"><a href="http://grails.org"><img src="${resource(dir:'images',file:'grails_logo.png')}" alt="Grails" border="0" /></a></div>
<g:layoutBody />
</body>
</html>
html * {
margin: 0;
/*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
}
/* GENERAL */
.spinner {
padding: 5px;
position: absolute;
right: 0;
}
body {
background: #fff;
color: #333;
font: 11px verdana, arial, helvetica, sans-serif;
}
#grailsLogo {
padding:20px;
}
a:link, a:visited, a:hover {
color: #666;
font-weight: bold;
text-decoration: none;
}
h1 {
color: #48802c;
font-weight: normal;
font-size: 16px;
margin: .8em 0 .3em 0;
}
ul {
padding-left: 15px;
}
input, select, textarea {
background-color: #fcfcfc;
border: 1px solid #ccc;
font: 11px verdana, arial, helvetica, sans-serif;
margin: 2px 0;
padding: 2px 4px;
}
select {
padding: 2px 2px 2px 0;
}
textarea {
width: 250px;
height: 150px;
vertical-align: top;
}
input:focus, select:focus, textarea:focus {
border: 1px solid #b2d1ff;
}
.body {
float: left;
margin: 0 15px 10px 15px;
}
/* NAVIGATION MENU */
.nav {
background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
border: 1px solid #ccc;
border-style: solid none solid none;
margin-top: 5px;
padding: 7px 12px;
}
.menuButton {
font-size: 10px;
padding: 0 5px;
}
.menuButton a {
color: #333;
padding: 4px 6px;
}
.menuButton a.home {
background: url(../images/skin/house.png) center left no-repeat;
color: #333;
padding-left: 25px;
}
.menuButton a.list {
background: url(../images/skin/database_table.png) center left no-repeat;
color: #333;
padding-left: 25px;
}
.menuButton a.create {
background: url(../images/skin/database_add.png) center left no-repeat;
color: #333;
padding-left: 25px;
}
/* MESSAGES AND ERRORS */
.message {
background: #f3f8fc url(../images/skin/information.png) 8px 50% no-repeat;
border: 1px solid #b2d1ff;
color: #006dba;
margin: 10px 0 5px 0;
padding: 5px 5px 5px 30px
}
div.errors {
background: #fff3f3;
border: 1px solid red;
color: #cc0000;
margin: 10px 0 5px 0;
padding: 5px 0 5px 0;
}
div.errors ul {
list-style: none;
padding: 0;
}
div.errors li {
background: url(../images/skin/exclamation.png) 8px 0% no-repeat;
line-height: 16px;
padding-left: 30px;
}
td.errors select {
border: 1px solid red;
}
td.errors input {
border: 1px solid red;
}
/* TABLES */
table {
border: 1px solid #ccc;
width: 100%
}
tr {
border: 0;
}
td, th {
font: 11px verdana, arial, helvetica, sans-serif;
line-height: 12px;
padding: 5px 6px;
text-align: left;
vertical-align: top;
}
th {
background: #fff url(../images/skin/shadow.jpg);
color: #666;
font-size: 11px;
font-weight: bold;
line-height: 17px;
padding: 2px 6px;
}
th a:link, th a:visited, th a:hover {
color: #333;
display: block;
font-size: 10px;
text-decoration: none;
width: 100%;
}
th.asc a, th.desc a {
background-position: right;
background-repeat: no-repeat;
}
th.asc a {
background-image: url(../images/skin/sorted_asc.gif);
}
th.desc a {
background-image: url(../images/skin/sorted_desc.gif);
}
.odd {
background: #f7f7f7;
}
.even {
background: #fff;
}
/* LIST */
.list table {
border-collapse: collapse;
}
.list th, .list td {
border-left: 1px solid #ddd;
}
.list th:hover, .list tr:hover {
background: #b2d1ff;
}
/* PAGINATION */
.paginateButtons {
background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
border: 1px solid #ccc;
border-top: 0;
color: #666;
font-size: 10px;
overflow: hidden;
padding: 10px 3px;
}
.paginateButtons a {
background: #fff;
border: 1px solid #ccc;
border-color: #ccc #aaa #aaa #ccc;
color: #666;
margin: 0 3px;
padding: 2px 6px;
}
.paginateButtons span {
padding: 2px 3px;
}
/* DIALOG */
.dialog table {
padding: 5px 0;
}
.prop {
padding: 5px;
}
.prop .name {
text-align: left;
width: 15%;
white-space: nowrap;
}
.prop .value {
text-align: left;
width: 85%;
}
/* ACTION BUTTONS */
.buttons {
background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
border: 1px solid #ccc;
color: #666;
font-size: 10px;
margin-top: 5px;
overflow: hidden;
padding: 0;
}
.buttons input {
background: #fff;
border: 0;
color: #333;
cursor: pointer;
font-size: 10px;
font-weight: bold;
margin-left: 3px;
overflow: visible;
padding: 2px 6px;
}
.buttons input.delete {
background: transparent url(../images/skin/database_delete.png) 5px 50% no-repeat;
padding-left: 28px;
}
.buttons input.edit {
background: transparent url(../images/skin/database_edit.png) 5px 50% no-repeat;
padding-left: 28px;
}
.buttons input.save {
background: transparent url(../images/skin/database_save.png) 5px 50% no-repeat;
padding-left: 28px;
}
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
<link rel="shortcut icon" href="${resource(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
<g:layoutHead />
<g:javascript library="application" />
</head>
<body>
<div id="spinner" class="spinner" style="display:none;">
<img src="${resource(dir:'images',file:'spinner.gif')}" alt="Spinner" />
</div>
<g:layoutBody />
</body>
</html>
...
<body onload="${pageProperty(name:'body.onload')}" onunload=""${pageProperty(name:'body.onunload')}"">
<div id="spinner" class="spinner" style="display:none;">
<img src="${resource(dir:'images',file:'spinner.gif')}" alt="Spinner" />
</div>
<g:layoutBody />
</body>
...
Para se registrar, clique aqui.