Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

IgorC

Implantar "Como Chegar" Google Maps

Por , em PHP

Recommended Posts

IgorC    0

IgorC
Postado

Olá pessoal, antes de qualquer coisa, gostaria de dizer que sim, já vi que existem outras postagens e exemplos sobre isso aqui no imasters, porém, eu não estou conseguindo os resultados que eu quero, por isso criei esse novo tópico e espero que possam me ajudar.

 

Exemplo: http://www.luansantana.com.br/default.aspx

(vão em "menu" > "agenda" e, na parte inferior da página, há do lado direito o mapa e em cima dele o famoso "como chegar".

 

O que eu queria aprender, era implantar em meu site igual está nesse que eu passei como exemplo, eu já vi outros tópicos no fórum mostrando exemplos, etc sobre isso, porém, em ambos, se eu implanto eles no meu site, no lugar do mapa fica um quadrado cinza, e eu quero que fique igual desse site que eu passei como exemplo, o mapa normal etc e depois de colocar o endereço e clicar no botão a rota aparecer ali mesmo, ou seja, ( repetindo isso denovo kkk ) igualzinho está aí nesse site.

 

Se alguém puder me ajudar, eu agradeço muito, muito mesmo, pois tenho muitas dúvidas sobre API do Google e tenho um pouco de dificuldade para entender, por isso, se alguém for me ajudar peço que comente os códigos pra mim poder entender como tudo funciona, etc. Muito Obrigado.

 

 

UP!

Compartilhar este post

Link para o post
Compartilhar em outros sites

IgorC    0

IgorC
Postado

Olá pessoal, consegui o resultado que eu queria, segue o código para quem quiser:

 

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 
    <style type="text/css"> 
        #mapview{ visibility: hidden;}
		
		iframe { float: left; position: absolute; }
    </style>
 
    <title>Colocando um como chegar/traçar rotas do google maps em seu site, por newmsade</title>
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="script.js"></script>

</head> 
<body onload="initialize()">
 
<form action="javascript: void(0);" onSubmit="calcRoute()">
    <div>
        <input type="hidden" size="50" value="Rua Fernando Suckow, 650 - Centro" id="destino" />
    </div>
     
    <div>
        Origem: <input type="text" size="50" value="americana" id="endereco" />
    </div>
    <button type="submit">Como chegar?</button>
</form>
 
 <iframe width="500px" height="340px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com.br/maps?f=q&source=s_q&hl=pt-PT&geocode=&q=Rua+Fernando+Suckow,+650,+Centro,+PR&aq=&sll=-25.592459,-49.398158&sspn=0.011786,0.021136&ie=UTF8&hq=&hnear=Rua+Fernando+Suckow,+650+-+Centro,+Paran%C3%A1,+83702-200&ll=-25.592459,-49.398158&spn=0.011786,0.021136&t=m&z=14&iwloc=A&output=embed"></iframe>

 
<div id="mapview">
    <div id="map_canvas" style="float: left; width: 500px; height: 340px;"></div>
    <div class="direcao" style="float: left; width: 500px; height: 340px; overflow: scroll;">
        <div id="directionsPanel" style="width: 480px;height 100px"></div>
    </div>
</div>
</body> 
</html>

Javascript "script.js"

var directionDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;
 
        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var myLatlng = new google.maps.LatLng();
             
            var myOptions = {
                zoom:7,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: myLatlng
            }
 
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById("directionsPanel"));
        }
 
        function calcRoute() {
            var start = document.getElementById("endereco").value;
            var end = document.getElementById("destino").value;
            var request = {
                origin:start, 
                destination:end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
             
            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                } else {
                    alert(status);
                }
 
                document.getElementById('mapview').style.visibility = 'visible';
            });
        }

Está ae pessoal pra quem quiser... Eu consegui fazer assim individualmente, porém, não consigo implementar em meu projeto, se alguém se disponibilizar a me ajuda eu agradeço, VLWW!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito