Google Maps - Mudar a figura

vcsmetallica · Agosto 15, 2011, 12:13pm

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

lucasmurata · Agosto 15, 2011, 12:35pm

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

Ai tem tudo que voce precisa.

Abraço.

vcsmetallica · Agosto 15, 2011, 1:33pm

Entao,

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

Att

vcsmetallica · Agosto 15, 2011, 1:48pm

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

Lucas_Emanuel · Agosto 15, 2011, 2:54pm

[quote=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[/quote]

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.

vcsmetallica · Agosto 15, 2011, 9:16pm

Blza cara, me atende.

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

Vlw

vcsmetallica · Agosto 15, 2011, 9:38pm

Galera,

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

Valeu

lucasmurata · Agosto 16, 2011, 6:54am

[quote=vcsmetallica]Blza cara, me atende.

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

Vlw[/quote]

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.

vcsmetallica · Agosto 16, 2011, 7:35am

[quote=lucasmurata][quote=vcsmetallica]Blza cara, me atende.

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

Vlw[/quote]

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.[/quote]

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

vcsmetallica · Agosto 17, 2011, 1:56pm

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>

lucasmurata · Agosto 17, 2011, 2:11pm

[quote=vcsmetallica]Lucas,

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

Abaixo o meu xhtml

[code]

<?xml version='1.0' encoding='UTF-8' ?> Gerenciador de Veículos 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>

[/code][/quote]

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.

vcsmetallica · Agosto 17, 2011, 2:24pm

1- Qual é o erro que está dando? Não aparece o Mapa, a imagem, a rota?
Não aparece o mapa.
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

lucasmurata · Agosto 17, 2011, 2:34pm

[quote=vcsmetallica]1- Qual é o erro que está dando? Não aparece o Mapa, a imagem, a rota?
Não aparece o mapa.
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

[/quote]

Entao vamos em partes.

Primeiro faça o mapa aparecer:

[code]
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);[/code]

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.

vcsmetallica · Agosto 17, 2011, 3:59pm

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

vcsmetallica · Agosto 18, 2011, 9:30am

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

lucasmurata · Agosto 18, 2011, 9:38am

[quote=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[/quote]

Tenta remover essa linha:

mapTypeId: google.maps.MapTypeId.ROADMAP

E executa de novo.

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

vcsmetallica · Agosto 18, 2011, 9:51am

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

lucasmurata · Agosto 18, 2011, 10:03am

[quote=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[/quote]

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.

vcsmetallica · Agosto 18, 2011, 10:28am

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

lucasmurata · Agosto 18, 2011, 12:35pm

[quote=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
[/quote]

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?

Google Maps - Mudar a figura

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI