Converter v2 para v3 do googlemaps api [RESOLVIDO]

2 respostas
P

Olá pessoal,

Alguém aqui manja dessa conversão? não estou entendendo e não consegui fazer de nenhuma maneira a conversão da minha classe... alguém ai poderia ajudar este pobre mortal?

<script type='text/javascript'>
		var map;
		
	    function load() {
			if (GBrowserIsCompatible()) {
				map = new GMap2(document.getElementById("mapa"));
				
				// adicionando controle de zoom
				map.addControl(new GSmallMapControl());
				
				// adicionando controle de tipo        
				map.addControl(new GMapTypeControl());
			
				//carregando pontos via xml
				GDownloadUrl("<%=Support.getUrlApp()%><%=Support.getStaticPath()%>jsp/mapaGoogle/xmlGoogle.jsp?coddaf=" + document.dafForm.coddaf.value, criaMarcadoresRota);

				//carregando ultimos sinais				
				carregarUltimosSinais()
			}
	    }
	    
	    function criaMarcadores(conteudo, httpResponseCode){
			var xml = GXml.parse(conteudo);
	    	var marcadores = xml.documentElement.getElementsByTagName("marcador");
	    	
	    	for (var i = 0; i < marcadores.length; i++){
				var ponto = new GLatLng(parseFloat(marcadores[i].getAttribute("lat")), parseFloat(marcadores[i].getAttribute("lng")));

				//centralizando no ultimo ponto
				if (i==0){
					map.setCenter(new GLatLng(marcadores[0].getAttribute("lat"), marcadores[0].getAttribute("lng")), 16);
				}

				map.addOverlay(criaMarcador(ponto,marcadores[i]));
			}
	    }
	    
	    function criaMarcadoresRota(conteudo, httpResponseCode){
			var xml = GXml.parse(conteudo);
	    	var marcadores = xml.documentElement.getElementsByTagName("marcador");
	    	var pontos = [];
	    	var ponto;
	    	var local;
	    	var ultimoPonto = 'true';
	
	    	for (var i = 0; i < marcadores.length; i++){
				ponto = new GLatLng(parseFloat(marcadores[i].getAttribute("lat")), parseFloat(marcadores[i].getAttribute("lng")));
				
				//centralizando no ultimo ponto
				if (i==0){
					map.setCenter(new GLatLng(marcadores[0].getAttribute("lat"), marcadores[0].getAttribute("lng")), 16);
				}

				pontos.push(ponto);
				map.addOverlay(criaMarcador(ponto, marcadores[i], ultimoPonto));
				ultimoPonto = 'false';
			}
			map.addOverlay(new GPolyline(pontos));
			// map.addOverlay(new GPolyline(pontos,"#ff0000", 5));  <-- altera cor e espessura da linha de rota
	    }
	    
		function criaMarcador(ponto, informacoes, ultimoPonto){
			// atribuindo imagem ao marcador
			letteredIcon = criaImagemMarcador(informacoes, ultimoPonto);
			markerOptions = { icon:letteredIcon };

			// criando marcador		
	  		var marcador = new GMarker(ponto, markerOptions);
	  	
	  		// atribuindo informacoes ao marcador
	  		var html = "<p><b>Data:</b> " + informacoes.getAttribute("dataHora") + "<br>";
	  		html += "<b>Veículo:</b> " + informacoes.getAttribute("placa") + " - " + informacoes.getAttribute("veiculo") + "<br>";
	  		html += "<b>Velocidade:</b> " + informacoes.getAttribute("velocidade") + "Km/h<br>";
//	  		html += "<b>Endereço:</b> " + informacoes.getAttribute("endereco") + "</p>";
//	  		html += "<b>Cidade:</b> " + informacoes.getAttribute("cidade") + "</p>";
			GEvent.addListener(marcador, "click",
		  		function (){
					marcador.openInfoWindowHtml(html);
				});
			return marcador;
		}
		
		function criaImagemMarcador(informacoes, ultimoPonto){
			var angulo = informacoes.getAttribute("angulo");
			var velocidade = informacoes.getAttribute("velocidade");

			// selecionando imagem do marcador
			var baseIcon = new GIcon();
	        baseIcon.iconSize = new GSize(24, 24);
	        baseIcon.iconAnchor = new GPoint(5, 18);
	        baseIcon.infoWindowAnchor = new GPoint(9, 2);

			if(ultimoPonto=='false'){
				// caso NAO SEJA o ultimo ponto, exibir marcador padrao
		        baseIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_red.png";
				var letteredIcon = new GIcon(baseIcon);			
				
			}else{
				// caso SEJA o ultimo ponto, exibir setas ou sinalizador de veiculo parado
				baseIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_green.png";
				var letteredIcon = new GIcon(baseIcon);
			
				if(parseInt(velocidade) == 0){
					// Veiculo Parado
					letteredIcon.image = "<%=Support.getStaticPath()%>/images/VeiculoParado2.gif";			
				}else{
					if(parseFloat(angulo) >= parseFloat('337.5') || parseFloat(angulo) < parseFloat('22.5')){
						// Norte
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaAcima.gif";
					}else if(parseFloat(angulo) >= parseFloat('22.5') && parseFloat(angulo) < parseFloat('67.5')){
						// Nordeste
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaAcimaDireita.gif";
					}else if(parseFloat(angulo) >= parseFloat('67.5') && parseFloat(angulo) < parseFloat('112.5')){
						// Leste
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaDireita.gif";
					}else if(parseFloat(angulo) >= parseFloat('112.5') && parseFloat(angulo) < parseFloat('157.5')){
						// Sudeste
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaAbaixoDireita.gif";
					}else if(parseFloat(angulo) >= parseFloat('157.5') && parseFloat(angulo) < parseFloat('202.5')){
						// Sul
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaAbaixo.gif";
					}else if(parseFloat(angulo) >= parseFloat('202.5') && parseFloat(angulo) < parseFloat('247.5')){
						// Sudoeste
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaAbaixoEsquerda.gif";				
					}else if(parseFloat(angulo) >= parseFloat('247.5') && parseFloat(angulo) < parseFloat('292.5')){
						// Oeste
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaEsquerda.gif";				
					}else if(parseFloat(angulo) >= parseFloat('292.5') && parseFloat(angulo) < parseFloat('337.5')){
						// Noroeste
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaAcimaEsquerda.gif";			
					}
				}
			}
			//retornando imagem do marcador
			return letteredIcon;
		}

	   	function carregarUltimosSinais(){
	   		obterObjeto("listaSinaisAjax").innerHTML="Aguarde... atualizando sinais...";
	   		popularTable("mapa.do?submit=UltimosSinaisDAF", obterObjeto("listaSinaisAjax"));
			//atualizando ultimos sinais
			//setTimeout("carregarUltimosSinais()", 60000);
	   	}		
	   	
	  	function carregarMapa(codigoDAF){
			document.dafForm.action="<%=Support.getStaticPath()%>mapaGoogle.do";
	  		document.dafForm.coddaf.value=codigoDAF;
	    	document.dafForm.submit();    		
	  	}	   		
		
	   	function voltar(){
	   		document.dafForm.action="<%=Support.getStaticPath()%>home.do";
		   	document.dafForm.submit();
	   	}	
    </script>

2 Respostas

P

Ninguem???

Eu tentei fazer algo... mas nada...

<%@ page import="br.com.portoseguro.sisrauto.view.tagLib.*"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>

<bean:define id="home"
    name="homeTO"
    scope="request"
    type="br.com.portoseguro.sisrauto.commons.to.HomeTO "/>
    
<bean:define id="daf"
    name="dafTO"
    scope="request"
    type="br.com.portoseguro.sisrauto.commons.to.DafTO "/>

<!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:v="urn:schemas-microsoft-com:vml">
  <head>
	<!-- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<meta http-equiv='keywords' content='porto,seguro,seguros,sistema,rastreador,monitoramento,automóvel'/>
	<meta http-equiv='description' content='Sistema de Rastreamento Automotivo'/>
	<title>Sistema de Rastreamento Automotivo - Mapa2</title>
	<link rel='stylesheet' href='css/default.css' type='text/css'/>
	<link rel='stylesheet' href='css/main.css' type='text/css'/>
	<style type='text/css'>
	div#error{float:left;width:260px;padding:5px 20px 10px;margin:0 auto; background:#FFCACA;}
	div#error span{font-weight:bold;}
	div#error li{font-style:italic;}
	</style>
	<script language='JavaScript1.2' src='js/funcoes.js'></script>
	<script language='JavaScript1.2' src='js/ajax.js'></script>
	<script language='JavaScript1.2' src='js/downloadxml.js'></script>
	
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	
<script type="text/javascript"> 
var map;



  function load() {
    var latlng = new google.maps.LatLng(-23.521182,-46.63559);
 
    var mapOpts = {
      zoom: 7,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
 
    var map = new google.maps.Map(document.getElementById("mapa"),
        mapOpts);	
    // var url = "./data.xml";
    var url = "<%=Support.getUrlApp()%><%=Support.getStaticPath()%>jsp/mapaGoogle/xmlGoogle.jsp?coddaf=" + document.dafForm.coddaf.value;
	//carregando pontos via xml

	downloadUrl(url, function(data) {
	      var xmlDoc = xmlParse(data);
	      var marcadores = xmlDoc.getElementsByTagName("marcador");
	    	var pontos = [];
	    	var ponto;
	    	var local;
	    	var ultimoPonto = 'true';
	      
	 
	      for (var i = 0; i < marcadores.length; i++) {
			var ponto = new google.maps.LatLng(parseFloat(marcadores[i].getAttribute("lat")), parseFloat(marcadores[i].getAttribute("lng")));
			//centralizando no ultimo ponto
			if (i==0){
				ponto = new google.maps.LatLng(parseFloat(marcadores[i].getAttribute("lat")), parseFloat(marcadores[i].getAttribute("lng")),
				{center: ponto,
		        zoom: 16});
				
			}
			pontos.push(ponto);
		      var marcador = new google.maps.Marker({
		            position: criaMarcador(ponto,marcadores[i],ultimoPonto),
		            map: map		            
		      });
		      ultimoPonto = 'false';
		      
		  }

	      poly = new google.maps.Polyline(pontos);
	      poly.setMap(map);
	      
	    });

	//carregando ultimos sinais				
	carregarUltimosSinais();
  
  }
    
<%-- </script> 


 	<script type='text/javascript'>
		var map;
		
	    function load() {
			if (GBrowserIsCompatible()) {
				map = new GMap2(document.getElementById("mapa"));
				
				// adicionando controle de zoom
				map.addControl(new GSmallMapControl());
				
				// adicionando controle de tipo        
				map.addControl(new GMapTypeControl());
			
				//carregando pontos via xml
				GDownloadUrl("<%=Support.getUrlApp()%><%=Support.getStaticPath()%>jsp/mapaGoogle/xmlGoogle.jsp?coddaf=" + document.dafForm.coddaf.value, criaMarcadoresRota);

				//carregando ultimos sinais				
				carregarUltimosSinais()
			}
	    } --%>
	    
/* 	    function criaMarcadores(conteudo, httpResponseCode){
			alert("criarMarcadores");
	    	var xml = GXml.parse(conteudo);
	    	var marcadores = xml.documentElement.getElementsByTagName("marcador");
	    	
	    	for (var i = 0; i < marcadores.length; i++){
				var ponto = new GLatLng(parseFloat(marcadores[i].getAttribute("lat")), parseFloat(marcadores[i].getAttribute("lng")));

				//centralizando no ultimo ponto
				if (i==0){
					map.setCenter(new GLatLng(marcadores[0].getAttribute("lat"), marcadores[0].getAttribute("lng")), 16);
				}

				map.addOverlay(criaMarcador(ponto,marcadores[i]));
			}
	    } */
	    
/* 	    function criaMarcadoresRota(conteudo, httpResponseCode){
			var xml = GXml.parse(conteudo);
	    	var marcadores = xml.documentElement.getElementsByTagName("marcador");
	    	var pontos = [];
	    	var ponto;
	    	var local;
	    	var ultimoPonto = 'true';
	
	    	for (var i = 0; i < marcadores.length; i++){
				ponto = new GLatLng(parseFloat(marcadores[i].getAttribute("lat")), parseFloat(marcadores[i].getAttribute("lng")));
				
				//centralizando no ultimo ponto
				if (i==0){
					map.setCenter(new GLatLng(marcadores[0].getAttribute("lat"), marcadores[0].getAttribute("lng")), 16);
				}

				pontos.push(ponto);
				map.addOverlay(criaMarcador(ponto, marcadores[i], ultimoPonto));
				ultimoPonto = 'false';
			}
			map.addOverlay(new GPolyline(pontos));
			// map.addOverlay(new GPolyline(pontos,"#ff0000", 5));  <-- altera cor e espessura da linha de rota
	    } */
	    
		function criaMarcador(ponto, informacoes, ultimoPonto){
	    	alert("criarMarcador");
			// atribuindo imagem ao marcador
			letteredIcon = criaImagemMarcador(informacoes, ultimoPonto);
			markerOptions = { icon:letteredIcon };

			// criando marcador		
	  		var marcador = new google.maps.Marker(ponto, markerOptions);
	  	
	  		// atribuindo informacoes ao marcador
	  		var html = "<p><b>Data:</b> " + informacoes.getAttribute("dataHora") + "<br>";
	  		html += "<b>Veículo:</b> " + informacoes.getAttribute("placa") + " - " + informacoes.getAttribute("veiculo") + "<br>";
	  		html += "<b>Velocidade:</b> " + informacoes.getAttribute("velocidade") + "Km/h<br>";
//	  		html += "<b>Endereço:</b> " + informacoes.getAttribute("endereco") + "</p>";
//	  		html += "<b>Cidade:</b> " + informacoes.getAttribute("cidade") + "</p>";
			google.maps.event.addListener(marcador, "click",
		  		function (){
		        infowindow.setContent(html); 
		        infowindow.open(map,marcador);

				});
			return marcador;
		}

		function criaImagemMarcador(informacoes, ultimoPonto){
			alert("criarImagemMarcador");
			var angulo = informacoes.getAttribute("angulo");
			var velocidade = informacoes.getAttribute("velocidade");
	        

			if(ultimoPonto=='false'){
				// caso NAO SEJA o ultimo ponto, exibir marcador padrao
		        var baseIcon = new google.maps.MarkerImage('http://labs.google.com/ridefinder/images/mm_20_red.png',
		        	    new google.maps.Size(24, 24),
		        	    new google.maps.Point(5,18),
		        	    new google.maps.Point(9, 2));
		        var letteredIcon = baseIcon;
		        
			}else{
				// caso SEJA o ultimo ponto, exibir setas ou sinalizador de veiculo parado
		        var baseIcon = new google.maps.MarkerImage('http://labs.google.com/ridefinder/images/mm_20_green.png',
		        	    new google.maps.Size(24, 24),
		        	    new google.maps.Point(5,18),
		        	    new google.maps.Point(9, 2));
		        var letteredIcon = baseIcon;
			
				if(parseInt(velocidade) == 0){
					// Veiculo Parado
					letteredIcon.image = "<%=Support.getStaticPath()%>/images/VeiculoParado2.gif";			
				}else{
					if(parseFloat(angulo) >= parseFloat('337.5') || parseFloat(angulo) < parseFloat('22.5')){
						// Norte
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaAcima.gif";
					}else if(parseFloat(angulo) >= parseFloat('22.5') && parseFloat(angulo) < parseFloat('67.5')){
						// Nordeste
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaAcimaDireita.gif";
					}else if(parseFloat(angulo) >= parseFloat('67.5') && parseFloat(angulo) < parseFloat('112.5')){
						// Leste
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaDireita.gif";
					}else if(parseFloat(angulo) >= parseFloat('112.5') && parseFloat(angulo) < parseFloat('157.5')){
						// Sudeste
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaAbaixoDireita.gif";
					}else if(parseFloat(angulo) >= parseFloat('157.5') && parseFloat(angulo) < parseFloat('202.5')){
						// Sul
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaAbaixo.gif";
					}else if(parseFloat(angulo) >= parseFloat('202.5') && parseFloat(angulo) < parseFloat('247.5')){
						// Sudoeste
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaAbaixoEsquerda.gif";				
					}else if(parseFloat(angulo) >= parseFloat('247.5') && parseFloat(angulo) < parseFloat('292.5')){
						// Oeste
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaEsquerda.gif";				
					}else if(parseFloat(angulo) >= parseFloat('292.5') && parseFloat(angulo) < parseFloat('337.5')){
						// Noroeste
						letteredIcon.image = "<%=Support.getStaticPath()%>/images/SetaAcimaEsquerda.gif";			
					}
				}
			}
			//retornando imagem do marcador
			return letteredIcon;
		}

	   	function carregarUltimosSinais(){
	   		obterObjeto("listaSinaisAjax").innerHTML="Aguarde... atualizando sinais...";
	   		popularTable("mapa.do?submit=UltimosSinaisDAF", obterObjeto("listaSinaisAjax"));
			//atualizando ultimos sinais
			//setTimeout("carregarUltimosSinais()", 60000);
	   	}		
	   	
	  	function carregarMapa(codigoDAF){
			document.dafForm.action="<%=Support.getStaticPath()%>mapaGoogle.do";
	  		document.dafForm.coddaf.value=codigoDAF;
	    	document.dafForm.submit();    		
	  	}	   		
		
	   	function voltar(){
	   		document.dafForm.action="<%=Support.getStaticPath()%>home.do";
		   	document.dafForm.submit();
	   	}	
    </script> 
    
    
</head>

<body onload="load()">
	<div id='wrapper'>
		<div id='headersmall'>	
			<div class='h1'></div>
			<div class='h2'>
				<div class='textbox'>
					<font class='title'>Outras Localidades:</font><br/><bean:message key="system.telefoneOutrasLocalidades"/>
				</div>
				<div id='usuarioLogado' style='position:absolute; top:41px'>
					<table width='270px' border="0">
						<tr>
							<td align="right" valign="bottom">
								<img src='images/user.gif'>
								<bean:write name="dafForm" property="nmUsuario"/>
								&nbsp;
								<a href='#' onclick="window.open('<%=Support.getStaticPath()%>ajuda.do?modulo=mapa','','toolbar=no,scrollbars=no,width=700,height=500,top=10,left=10,resizable=yes')" style="color:#3E4A71;">
									<img src='images/help.gif'>Dúvidas
								</a>
							</td>							
						</tr>
					</table>
				</div>
			</div>
			<div class='h2'>
				<div class='textbox'>
					<font class='title'>Grande São Paulo:</font><br/><bean:message key="system.telefoneGrandeSaoPaulo"/>
				</div>
				<logic:notEmpty name="dafForm" property="nmUserSimula">
					<div id='usuarioLogado' style='position:absolute; top:41px'>
						<table width='270px' border="0">
							<tr>
								<td align="left" valign="bottom">&nbsp;&nbsp;
									<img src='images/user.gif'>
									<font class='destaqueUserSimula'>
										<bean:write name="dafForm" property="nmUserSimula"/>
									</font>
								</td>							
							</tr>
						</table>
					</div>
				</logic:notEmpty>
			</div>
		</div>
		<input type='hidden' name='acao' value=''>
		<div id='areamap'>
			<ul id='window'>
			    <li id="map">
				    <table width="100%" border="0">
				    	<tr>
				    		<td><div class="title"><b><bean:message key="system.mapa"/></b></div></td>
			    			<logic:equal name="daf" property="idSituacao" value="B">
								<td align="center"><div class="itemDestacado"><bean:message key="info.mensSinistro"/></div></td>
							</logic:equal>
				    		<td><div class="title" align="right">
								<html:reset styleClass="bt" onclick="load();">
									<bean:message key="button.refresh"/>
								</html:reset>				    		
								<html:reset styleClass="bt" onclick="voltar();">
									<bean:message key="button.back"/>
								</html:reset>				    		
				    		</div></td>
				    	</tr>
				    </table>
			        <div class="text">
						<html:form action="/mapa.do">
							<html:hidden property="coddaf"/>
							<div id="mapa" style="width: 640px; height: 377px"></div>
						</html:form>							
			        </div>
			    </li>
			    <li id="vehiclesmap"><div class="title"><b>Ver no Mapa</b></div>
			        <div class="text" id="listaDafs" style="position:relative; padding:0px 0px 0px 2px; width:auto; height:380px; margin:0px; overflow:auto;">
			            <logic:notEmpty name="home" property="dafs">
				            <table width="97%" cellspacing="0" border="0">			            
				                <logic:iterate name="home" id="dafs" indexId="indice" property="dafs">
					                <tr class="line<%=(indice%2)%>">
					                	<td>				                
					                		<logic:equal name="dafs" property="idSituacao" value="A">
												<div title="<bean:write name="dafs" property="marca"/> <bean:write name="dafs" property="modelo"/> - <bean:write name="dafs" property="nmProprietario"/>"><b>&rsaquo;</b> <a href="#" onclick="javascript:carregarMapa('<bean:write name="dafs" property="coddaf"/>')"><bean:write name="dafs" property="placa"/></a></div>
											</logic:equal>
					                		<logic:equal name="dafs" property="idSituacao" value="B">
												<div title="<bean:write name="dafs" property="marca"/> <bean:write name="dafs" property="modelo"/> - <bean:write name="dafs" property="nmProprietario"/> - Veículo em processo de localização pela central de operações"><b>&rsaquo;</b> <a style='color: #D20206' href="#" onclick="javascript:carregarMapa('<bean:write name="dafs" property="coddaf"/>')"><bean:write name="dafs" property="placa"/></a></div>												
				    	                	</logic:equal>
										</td>
									</tr>
				                </logic:iterate>
							</table>
			            </logic:notEmpty>
			        </div>
			    </li>
			    <li id="historymap">
			    	<div class="title">
			    		<b>Últimos Sinais</b> (<bean:write name="dafForm" property="marca"/>
												    		<bean:write name="dafForm" property="modelo"/> -
											    		    <bean:write name="dafForm" property="placa"/>)
			    	</div>
					<div class="list2" id="ultimosSinais" style="position:relative; padding:0px 0px 0px 10px; width:auto; height:158px; margin:0px; overflow:auto;">
						<span id="listaSinaisAjax"></span>
			        </div>
			    </li>	
			</ul>
		</div>
	</div>
</body>
</html>
P

Consegui assim:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@page isELIgnored ="false" %>  
    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>  
     
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html> 
<head> 
<title>TESTE2</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function createMarker(point,info,map) {
    var iconURL = 'img/pata.png';				
    var iconSize = new google.maps.Size(32,34);
    var iconOrigin = new google.maps.Point(0,0);	
    var iconAnchor = new google.maps.Point(15,30);
 
    var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);

    //PARA SETAR IMAGEM DO MARCADOR, DESCOMENTAR		
    var marker = new google.maps.Marker({
      position : point,
      html : info,
      map : map,
 	  icon: myIcon
    });

    var infowindow = new google.maps.InfoWindow({
        content: "Dispositivo: " + info + "<br> Endereço: " + point
       
    });
    
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,this);
      });
   
  }

function createMarkerInicio(point,info,map) {
    var iconURL = 'img/casaDog.png';				
    var iconSize = new google.maps.Size(50,50);
    var iconOrigin = new google.maps.Point(0,0);	
    var iconAnchor = new google.maps.Point(15,30);
 
    var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);

    var marker = new google.maps.Marker({
      position : point,
      html : info,
      map : map,
 	  icon: myIcon
    });

  }
  
function createMarkerAtual(point,info,map) {
    var iconURL = 'img/dog2.png';				
    var iconSize = new google.maps.Size(45,45);
    var iconOrigin = new google.maps.Point(0,0);	
    var iconAnchor = new google.maps.Point(15,30);
 
    var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);

    var marker = new google.maps.Marker({
      position : point,
      html : info,
      map : map,
 	  icon: myIcon
    });
  }
  

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(-23.521182,-46.63559);
  var mapOptions = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  calcRoute();
}

function calcRoute() {
	var myTrip=[];
	var bounds = new google.maps.LatLngBounds();
	/* var start; 
	var inicio; */
	    <c:forEach var="listaCoord" varStatus="status" items="${listaCoord}">
	    								
			var cod = '${listaCoord.codDaf}';
			var lat = '${listaCoord.idLatitude}';
			var lng = '${listaCoord.idLongitude}';

			var pt = new google.maps.LatLng(lat, lng);    
			
			myTrip.push(pt);
			bounds.extend(pt);
			/* Verifica o ponto mais recente */
			/* Verifica o ponto de partida (início) */
			/*Cria ponto*/
			<c:choose>
				<c:when test="${status.first}">
	    			//atual = pt;
	    			createMarkerAtual(pt,cod,map);
		    	</c:when>
		    	
		    	<c:when test="${status.last}">
	    			//inicio = pt;
	    			createMarkerInicio(pt,cod,map);
		    	</c:when>
		    	
		        <c:otherwise>
		        	createMarker(pt,cod,map);
		    	</c:otherwise>
			</c:choose>
		      
	    </c:forEach>

	    var flightPath = new google.maps.Polyline({
	    	   path:myTrip,
	    	   strokeColor:"#0000FF",
	    	   strokeOpacity:0.5,
	    	   strokeWeight:4
	    	 });

	    flightPath.setMap(map);
	    map.fitBounds(bounds);

}


google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body onload="initialize()">
    <div id="map-canvas" style="float:left;width:70%;height:100%;"></div>
    <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
    
    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
    </div>
  </body>
</html>
Criado 10 de outubro de 2013
Ultima resposta 24 de out. de 2013
Respostas 2
Participantes 1