Google Maps - Mudar a figura

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

JavaTeenager Membro desde: 15/07/2011 14:36:43 Mensagens: 158 Offline

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

Ai tem tudo que voce precisa.

Abraço.

Entao,

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

Att

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

vcsmetallica wrote: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.

Blza cara, me atende.

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

Vlw

Galera,

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

Valeu

JavaTeenager Membro desde: 15/07/2011 14:36:43 Mensagens: 158 Offline

vcsmetallica wrote: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.

lucasmurata wrote:

vcsmetallica wrote: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.

Att

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>

JavaTeenager Membro desde: 15/07/2011 14:36:43 Mensagens: 158 Offline

vcsmetallica wrote: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.

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!

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

JavaTeenager Membro desde: 15/07/2011 14:36:43 Mensagens: 158 Offline

vcsmetallica wrote: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!
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:

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.

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

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:

Notícias, artigos e o maior fórum brasileiro sobre Java