Discussoes de Programacao e Tecnologia

Google Maps - Mudar a figura

25 respostas
V
vcsmetallica

Galera!!!

Seguinte, estou desenvolvendo uma aplicação onde estou usando o google maps, essa aplicação é para rastreamento de carro. O meu chefe que que eu mostre uma imagem de um carrinho no map indicando onde o carro esta.

Alguem ja mexeu com isso assim?
Como que eu vou por essa infelicidade de imagem?

Att

Alura Git Flow: entenda o que é, como e quando utilizar Entenda o que é Git Flow, como funciona seu fluxo com branches como Master, Develop, Feature, Release e Hotfix, além de vantagens e desvantagens.

25 Respostas

L
lucasmurata

http://code.google.com/intl/pt-BR/apis/maps/index.html

Ai tem tudo que voce precisa.

Abraço.

V
vcsmetallica

Entao,

Não achei na documentação essa parte em especifico.
Tem algum nome em especial?

Att

V
vcsmetallica

Achei um exemplo, mas o cara fez usando servlet e tem mais de 520 linhas de codigos.
Acho que deve ter um jeito mais facil.

Att

L
Lucas_Emanuel

vcsmetallica:
Achei um exemplo, mas o cara fez usando servlet e tem mais de 520 linhas de codigos.
Acho que deve ter um jeito mais facil.

Att

Tem certeza que voce pesquisou a documentação?
http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/overlays.html#Icons

Ai mostra como colocar figura, como voce diz.

V
vcsmetallica

Blza cara, me atende.

So não estou sabendo colocar junto com o meu xhtml. mas um dia sai!!!

Vlw

V
vcsmetallica

Galera,

Achei esse carinha aqui qua ajuda http://code.google.com/p/gmaps4jsf/

Valeu

L
lucasmurata

vcsmetallica:
Blza cara, me atende.

So não estou sabendo colocar junto com o meu xhtml. mas um dia sai!!!

Vlw

Voce pode colocar nas páginas xhtml da mesma forma que colocaria em qualquer documento html. A manipulação é feita com JS. Não é porque voce esta usando JSF que tem que usar seus componentes e tags. Manda ver que voce consegue.

V
vcsmetallica

lucasmurata:
vcsmetallica:
Blza cara, me atende.

So não estou sabendo colocar junto com o meu xhtml. mas um dia sai!!!

Vlw

Voce pode colocar nas páginas xhtml da mesma forma que colocaria em qualquer documento html. A manipulação é feita com JS. Não é porque voce esta usando JSF que tem que usar seus componentes e tags. Manda ver que voce consegue.

Lucas, valeu pela dica. Eu achei uma ferramenta que usa tag’s jsf para a api do google maps, estou estudando ela. É bem documentada e acho que vai me servir.

:lol:

Att

V
vcsmetallica

Lucas,

Entao, o inferno da biblioteca nao me atende.
Não stou conseguindo fazer isso funcionar.

Abaixo o meu xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>Gerenciador de Veículos</title>
        <link type="text/css" rel="stylesheet" href="dot-luv/skin.css" />
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          function initialize() {
              alert("ola");
            var myOptions = {
              zoom: 4,
              center: new google.maps.LatLng(-33, 151),
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"),
                                          myOptions);

            var image = 'images/beachflag.png';
            var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
            var beachMarker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image
            });
          }
        </script>
    </h:head>
    <h:body id="principal" onload="initialize()">
        <h:form id="formPrincipal">
            <p:layout fullPage="true">
                <p:layoutUnit position="top" height="75" header="Opções" resizable="true" closable="false" collapsible="true">
                    <h:outputText value="North unit content." />
                    <p:ajaxStatus style="height:24px;display:block;">
                        <f:facet name="start">
                            <h:graphicImage value="./../images/ajaxwait.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>

                </p:layoutUnit>
                <p:layoutUnit position="left" width="200" header="Veículos" resizable="true" closable="false" collapsible="true">
                    <h:commandButton value="Teste" onclick="initialize()" />
                </p:layoutUnit>
                <p:layoutUnit position="center" header="Mapa" id="layout" >
                  
                        <div id="map_canvas"></div>
                
                </p:layoutUnit>
                <p:layoutUnit position="right" width="200" header="Informações" resizable="true" closable="false" collapsible="true">
                </p:layoutUnit>
            </p:layout>
        </h:form>
    </h:body>
</html>
L
lucasmurata
vcsmetallica:
Lucas,

Entao, o inferno da biblioteca nao me atende.
Não stou conseguindo fazer isso funcionar.

Abaixo o meu xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>Gerenciador de Veículos</title>
        <link type="text/css" rel="stylesheet" href="dot-luv/skin.css" />
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          function initialize() {
              alert("ola");
            var myOptions = {
              zoom: 4,
              center: new google.maps.LatLng(-33, 151),
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"),
                                          myOptions);

            var image = 'images/beachflag.png';
            var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
            var beachMarker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image
            });
          }
        </script>
    </h:head>
    <h:body id="principal" onload="initialize()">
        <h:form id="formPrincipal">
            <p:layout fullPage="true">
                <p:layoutUnit position="top" height="75" header="Opções" resizable="true" closable="false" collapsible="true">
                    <h:outputText value="North unit content." />
                    <p:ajaxStatus style="height:24px;display:block;">
                        <f:facet name="start">
                            <h:graphicImage value="./../images/ajaxwait.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>

                </p:layoutUnit>
                <p:layoutUnit position="left" width="200" header="Veículos" resizable="true" closable="false" collapsible="true">
                    <h:commandButton value="Teste" onclick="initialize()" />
                </p:layoutUnit>
                <p:layoutUnit position="center" header="Mapa" id="layout" >
                  
                        <div id="map_canvas"></div>
                
                </p:layoutUnit>
                <p:layoutUnit position="right" width="200" header="Informações" resizable="true" closable="false" collapsible="true">
                </p:layoutUnit>
            </p:layout>
        </h:form>
    </h:body>
</html>

1- Qual é o erro que está dando? Não aparece o Mapa, a imagem, a rota?
2- Essa imagem realmente existe, e se existe está com caminho certo? "images/beachflag.png"
3- Voce tem que usar o JSFail? Alguns compoenetes podem impedir o controle fino do JS.

Uma vez tive que fazer isso, no começo foi chatinho, mas depois que voce pega jeito da API, voce fica encantado e faz coisas impressionantes.

V
vcsmetallica

1- Qual é o erro que está dando? Não aparece o Mapa, a imagem, a rota?
Não aparece o mapa. :cry:
Estou tentando primeiro plotar o mapa, acho que é o primeiro passo! :lol:
Ai depois vou passar as coordenadas para ele

2- Essa imagem realmente existe, e se existe está com caminho certo? "images/beachflag.png"
A imagem existe sim

3- Voce tem que usar o JSFail? Alguns compoenetes podem impedir o controle fino do JS.
Não frago esse cara nao JSFail!

Eu ja mexi com a api usando o Flex. Realmente, muito legal mesmo, show de bola. Usando o flex eu fiz tudo isso, so que o desenvolvimento é diferente, vc importa as classes para dentro do seu actionscript e um abraço!
Mas so que estou tomando uma tunda da api no jsf

L
lucasmurata
vcsmetallica:
1- Qual é o erro que está dando? Não aparece o Mapa, a imagem, a rota? Não aparece o mapa. :cry: Estou tentando primeiro plotar o mapa, acho que é o primeiro passo! :lol: Ai depois vou passar as coordenadas para ele

2- Essa imagem realmente existe, e se existe está com caminho certo? "images/beachflag.png"
A imagem existe sim

3- Voce tem que usar o JSFail? Alguns compoenetes podem impedir o controle fino do JS.
Não frago esse cara nao JSFail!

Eu ja mexi com a api usando o Flex. Realmente, muito legal mesmo, show de bola. Usando o flex eu fiz tudo isso, so que o desenvolvimento é diferente, vc importa as classes para dentro do seu actionscript e um abraço!
Mas so que estou tomando uma tunda da api no jsf

Entao vamos em partes.

Primeiro faça o mapa aparecer:

function initialize() {
           
            var myOptions = {
              zoom: 4,
              center: new google.maps.LatLng(-33, 151),
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"),
                                          myOptions);

Uma coisa que pode estar acontecendo é que o lixo de JSFail dá IDs próprios aos componetes, e o JS nao está reconhecendo o map_canvas como ID.

verifique isso.

V
vcsmetallica

Entao, não funcionou.

olhei no codigo fonte dad pagina e ele nao esta acresentando nada de errado no nome.

Coloquei um alert no JS e o alert nao foi exibido.

Esta estranho esse negocio, vou fazer uma outra pagina aqui.

Att

V
vcsmetallica

Entao, abaixo o codigo:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>Gerenciador de Veículos</title>
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        <link type="text/css" rel="stylesheet" href="dot-luv/skin.css" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
              zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          }
        </script>
    </h:head>
    <h:body>
        <h:form>
            <p:layout fullPage="true">
                <p:layoutUnit position="top" height="75" header="Opções" resizable="true" closable="false" collapsible="true">
                    <h:outputText value="North unit content." />
                    <p:ajaxStatus style="height:24px;display:block;">
                        <f:facet name="start">
                            <h:graphicImage value="./../images/ajaxwait.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>

                </p:layoutUnit>
                <p:layoutUnit position="left" width="200" header="Veículos" resizable="true" closable="false" collapsible="true">
                    <h:commandButton value="Teste" onclick="initialize();" />
                </p:layoutUnit>
                <p:layoutUnit position="center" header="Mapa" >
                    <body onload="initialize();">
                        <div id="map_canvas" >teste</div>
                    </body>
                </p:layoutUnit>
                <p:layoutUnit position="right" width="200" header="Informações" resizable="true" closable="false" collapsible="true">
                </p:layoutUnit>
            </p:layout>
        </h:form>
    </h:body>
</html>

Quando coloco o codigo em html simples funciona, mas quando eu volto ele para xhtml ocorre o seguinte erro:

Erro: google.maps.MapTypeId is undefined
Arquivo-fonte: http://localhost:8084/cestelemetria/rastreamento/rastreamento.faces
Linha: 24
L
lucasmurata

vcsmetallica:
Entao, abaixo o codigo:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>Gerenciador de Veículos</title>
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        <link type="text/css" rel="stylesheet" href="dot-luv/skin.css" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
              zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          }
        </script>
    </h:head>
    <h:body>
        <h:form>
            <p:layout fullPage="true">
                <p:layoutUnit position="top" height="75" header="Opções" resizable="true" closable="false" collapsible="true">
                    <h:outputText value="North unit content." />
                    <p:ajaxStatus style="height:24px;display:block;">
                        <f:facet name="start">
                            <h:graphicImage value="./../images/ajaxwait.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>

                </p:layoutUnit>
                <p:layoutUnit position="left" width="200" header="Veículos" resizable="true" closable="false" collapsible="true">
                    <h:commandButton value="Teste" onclick="initialize();" />
                </p:layoutUnit>
                <p:layoutUnit position="center" header="Mapa" >
                    <body onload="initialize();">
                        <div id="map_canvas" >teste</div>
                    </body>
                </p:layoutUnit>
                <p:layoutUnit position="right" width="200" header="Informações" resizable="true" closable="false" collapsible="true">
                </p:layoutUnit>
            </p:layout>
        </h:form>
    </h:body>
</html>

Quando coloco o codigo em html simples funciona, mas quando eu volto ele para xhtml ocorre o seguinte erro:

Erro: google.maps.MapTypeId is undefined Arquivo-fonte: http://localhost:8084/cestelemetria/rastreamento/rastreamento.faces Linha: 24

Tenta remover essa linha:

mapTypeId: google.maps.MapTypeId.ROADMAP

E executa de novo.

Voce está usando alguma biblioteca específica do Maps do JSFail?

V
vcsmetallica

Nao estou usando JSFail. Removi a linha e continua com erros.
Removi o codigo js para um arquivo .js parou o erro, so que agora não abre o mapa.

Att

L
lucasmurata

vcsmetallica:
Nao estou usando JSFail. Removi a linha e continua com erros.
Removi o codigo js para um arquivo .js parou o erro, so que agora não abre o mapa.

Att

Utilize o Firebug ou o equivalente do Chrome e olhe para o ID da div do mapa, é o que está sendo chamado no JS mesmo? Pois o erro nao está no JS ja que no HTML ele funciona, é algum problema com xhtml.

V
vcsmetallica

entao, coloquei o bugzilla.

Esta vindo isso para mim

<div id="j_idt7:j_idt16">
<div id="map_canvas" style="height: 100%; width: 100%; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
<div 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%;">
<div style="margin: 2px 5px 2px 2px; z-index: 12; position: absolute; left: 0px; bottom: 0px;">
<div style="z-index: 1000; position: absolute; right: 0px; bottom: 0px;">
<div style="position: absolute; font-family: Arial,sans-serif; z-index: 1000; overflow: visible; display: none; -moz-user-select: none; cursor: default; width: 300px; height: 0px;">
<div class="gmnoprint" style="z-index: 10; margin: 5px; -moz-user-select: none; position: absolute; left: 0px; top: 0px;" controlwidth="32" controlheight="85">
<div style="cursor: url("http://maps.gstatic.com/intl/pt_br/mapfiles/openhand_8_8.cur"), default; z-index: 10; position: absolute; left: 0px; top: 0px;" controlwidth="32" controlheight="38">
<div style="width: 32px; height: 38px; overflow: hidden; position: absolute; left: 0px; top: 0px;">
<div style="width: 32px; height: 38px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;">
<div style="width: 32px; height: 38px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;">
<div style="width: 32px; height: 38px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;">
</div>
<div class="gmnoprint" controlwidth="0" controlheight="0" style="display: none; position: absolute;">
<div class="gmnoprint" controlwidth="19" controlheight="42" style="position: absolute; left: 7px; top: 43px;">
</div>
<div class="gmnoprint" style="margin: 5px; z-index: 11; position: absolute; cursor: pointer; right: 0px; top: 0px;">
<div style="float: left;">
<div style="direction: ltr; overflow: hidden; text-align: center; position: relative; color: white; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background: -moz-linear-gradient(center top , rgb(109, 138, 204), rgb(123, 152, 217)) repeat scroll 0% 0% transparent; line-height: 160%; padding: 0pt 6px; border-radius: 2px 0pt 0pt 2px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); border: 1px solid rgb(103, 138, 199); font-weight: bold; min-width: 33px;" title="Mostrar mapa de ruas">Mapa</div>
<div style="background-color: white; z-index: -1; padding-top: 1px; border-width: 0pt 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(169, 187, 223) rgb(169, 187, 223); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-image: none; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); position: absolute; left: 0px; top: 21px; text-align: left; display: none;">
</div>
<div style="float: left;">
</div>
</div>
</div>
</div>
</div>
</div>

O doido é que quando eu mando

escreve na div.

Att

L
lucasmurata

vcsmetallica:
entao, coloquei o bugzilla.

Esta vindo isso para mim

<div id="j_idt7:j_idt16">
<div id="map_canvas" style="height: 100%; width: 100%; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
<div 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%;">
<div style="margin: 2px 5px 2px 2px; z-index: 12; position: absolute; left: 0px; bottom: 0px;">
<div style="z-index: 1000; position: absolute; right: 0px; bottom: 0px;">
<div style="position: absolute; font-family: Arial,sans-serif; z-index: 1000; overflow: visible; display: none; -moz-user-select: none; cursor: default; width: 300px; height: 0px;">
<div class="gmnoprint" style="z-index: 10; margin: 5px; -moz-user-select: none; position: absolute; left: 0px; top: 0px;" controlwidth="32" controlheight="85">
<div style="cursor: url("http://maps.gstatic.com/intl/pt_br/mapfiles/openhand_8_8.cur"), default; z-index: 10; position: absolute; left: 0px; top: 0px;" controlwidth="32" controlheight="38">
<div style="width: 32px; height: 38px; overflow: hidden; position: absolute; left: 0px; top: 0px;">
<div style="width: 32px; height: 38px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;">
<div style="width: 32px; height: 38px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;">
<div style="width: 32px; height: 38px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;">
</div>
<div class="gmnoprint" controlwidth="0" controlheight="0" style="display: none; position: absolute;">
<div class="gmnoprint" controlwidth="19" controlheight="42" style="position: absolute; left: 7px; top: 43px;">
</div>
<div class="gmnoprint" style="margin: 5px; z-index: 11; position: absolute; cursor: pointer; right: 0px; top: 0px;">
<div style="float: left;">
<div style="direction: ltr; overflow: hidden; text-align: center; position: relative; color: white; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background: -moz-linear-gradient(center top , rgb(109, 138, 204), rgb(123, 152, 217)) repeat scroll 0% 0% transparent; line-height: 160%; padding: 0pt 6px; border-radius: 2px 0pt 0pt 2px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); border: 1px solid rgb(103, 138, 199); font-weight: bold; min-width: 33px;" title="Mostrar mapa de ruas">Mapa</div>
<div style="background-color: white; z-index: -1; padding-top: 1px; border-width: 0pt 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(169, 187, 223) rgb(169, 187, 223); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-image: none; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); position: absolute; left: 0px; top: 21px; text-align: left; display: none;">
</div>
<div style="float: left;">
</div>
</div>
</div>
</div>
</div>
</div>

O doido é que quando eu mando

escreve na div.

Att

Porque tem 2 doby no seu documento? Seu código está meio bagunçado, aquele body antes da div do mapa nao deveria existir…

No documento HTML roda normal ne?

V
vcsmetallica

No html roda normal.

A questao do body estava testando, com um e dois.
O estranho é que eu criei uma outra pagina xhtml sem o primefaces, e mesmo assim nao mostrou o mapa.

L
lucasmurata

vcsmetallica:
No html roda normal.

A questao do body estava testando, com um e dois.
O estranho é que eu criei uma outra pagina xhtml sem o primefaces, e mesmo assim nao mostrou o mapa.

Outros scripts de JS está funcionando?

V
vcsmetallica

Pior que esta.
Criei uma funcao para mostrar um alert e funcinou!!!

Att

L
lucasmurata

vcsmetallica:
Pior que esta.
Criei uma funcao para mostrar um alert e funcinou!!!

Att

tenta assim, removendo os componentes do JSFail:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Gerenciador de Veículos</title>
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        <link type="text/css" rel="stylesheet" href="dot-luv/skin.css" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
              zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          }
        </script>
    </h:head>
    <h:body onload="initialize()" >
        
        <div id="map_canvas" ></div>


    </h:body>
</html>
V
vcsmetallica

Funcinou.
Vou ver agora com os outros componentes.
Qualquer coisa chamo aqui novamente. Certamente vou postar mais coisas nesse topico.
Mais uma coisa, o que nao entendi é o tal de JSFail?
att

:lol:

V
vcsmetallica

Entao, agora eu queria fazer o carrinho andar a medida que vai chegando as coordenadas do equipamento de rastreamento.

Fiz da seguinte maneira e nada

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>Gerenciador de Veículos</title>
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        <link type="text/css" rel="stylesheet" href="dot-luv/skin.css" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          var map;
          function initialize(latitude, longitude) {
              var myLatlng = new google.maps.LatLng(latitude,longitude);
              var myOptions = {
                zoom: 18,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.SATELLITE
              }
              map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


           }

           function atualizarCarrinho(latitude, longitude){
               alert(map.getBounds());
              var image = '../images/carro_azul.jpg';
              var myLatLng = new google.maps.LatLng(latitude, longitude);
              var beachMarker = new google.maps.Marker({
                  position: myLatLng,
                  map: map,
                  icon: image
              });

              google.maps.event.addListener(map, 'bounds_changed', function() {
                alert(map.getBounds());
              });
           }
        </script>
    </h:head>
    <h:body  onload="initialize(#{rastreamentoControle.latitude},#{rastreamentoControle.longitude})" id="corpo">
        <h:form >
            <p:layout fullPage="true">
                <p:layoutUnit  position="top" height="75" header="Opções" resizable="true" closable="false" collapsible="true">
                    <h:commandButton onclick="atualizarCarrinho(#{rastreamentoControle.latitude},#{rastreamentoControle.longitude})" value="tetse" />
                    <p:poll interval="3" listener="#{rastreamentoControle.teste}" update="corpo" />

                </p:layoutUnit>
                <p:layoutUnit position="left" width="200" header="Veículos" resizable="true" closable="false" collapsible="true">

                </p:layoutUnit>
                <p:layoutUnit position="center" header="Mapa" >
                    <div id="map_canvas" ></div>
                </p:layoutUnit>
                <p:layoutUnit position="right" width="200" header="Informações" resizable="true" closable="false" collapsible="true">
                </p:layoutUnit>
            </p:layout>
        </h:form>
    </h:body>
</html>

Alguma ideia?

Criado 15 de agosto de 2011
Ultima resposta 25 de ago. de 2011
Respostas 25
Participantes 3

Topicos relacionados

Uma linguagem de programação pode te tornar estúpido? 78 respostas Aprender html é mais dificil do que parece 32 respostas Pegar o texto do select 3 respostas Livro avançado programação em C processamento de texto e manipulação de arquivos 17 respostas GBAK+FIREBIRD+Pasta destino com espaço no nome [RESOLVIDO] 5 respostas
Fiap Graduacao em Tecnologia — FIAP Analise e Desenvolvimento de Sistemas, Engenharia de Software e mais
Casa do Codigo Casa do Codigo — Livros de tecnologia Livros de programacao, infraestrutura e inovacao