Geek Answers Handbook

Navigation direction on Google Maps v3

I am doing a Google map project and you need to create a route by clicking on it.

In my project, there are 2 points that have predefined lat and lng, and I want to draw the beginning and end of points A and B myself and not lose its functionality.

I made another project that you can click to draw a route, but it does not have markers, and it does not drag, this is my actual project with full code. I will post a short code here only with my instructions.

I want my first click to point A and my second point B, and they have the ability to drag them, for example, related to the project

function goma() { var mapDiv = document.getElementById('mappy'); var mapOptions = { zoom: 12, center: new google.maps.LatLng(-23.563594, -46.654239), mapTypeId : google.maps.MapTypeId.ROADMAP } pode ser ROADMAP, SATELLITE, HYBRID, TERRAIN map = new google.maps.Map( mapDiv, mapOptions ); //Render route, etc. ren = new google.maps.DirectionsRenderer( {'draggable':true} ); ren.setMap(map); ren.setPanel(document.getElementById("directionsPanel")); ser = new google.maps.DirectionsService(); //Create the route ser.route({ 'origin': new google.maps.LatLng(-23.563594, -46.654129), 'destination': new google.maps.LatLng( -23.563672, -46.640396), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) { if(sts=='OK')ren.setDirections(res); }) }

I am updating my code here, I only made wayA, this is the first waypoint, the second is the predefined latLng, where you click, it gets latLng and is placed inside "origin".

  google.maps.event.addListener(map, "click", function(event) { wayA = new google.maps.Marker({ position: event.latLng, map: map }); }); ren = new google.maps.DirectionsRenderer( {'draggable':true} ); ren.setMap(map); ren.setPanel(document.getElementById("directionsPanel")); ser = new google.maps.DirectionsService(); ser.route({ 'origin': wayA, 'destination': new google.maps.LatLng( -23.563672, -46.640396), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) { if(sts=='OK')ren.setDirections(res); })

This is my full code test.

+1
source share
1 answer

Concept: (sounds the way you want)

  • Add a click event listener to the map.
  • When the user clicks on the map, add a draggable marker (I would add a click listener to it to remove it by clicking on it)
  • when the user clicks on the map a second time, adds a second draggable marker
  • when the second marker is added, call the route service with the position of the two tokens.
  • if any marker is dragged, call the route service again.

(if this is what you are trying to get confused about, a code or live link will be helpful)

You are missing # 3 and # 4

Working example

code snippet:

 var map, ren, ser; var data = {}; var data2 = {}; var marker; var infowindow; var doMark = true; var directionsDisplay; var wayA; var wayB; //Função de Inicio function goma() { var mapDiv = document.getElementById('mappy'); var mapOptions = { zoom: 12, center: new google.maps.LatLng(-23.563594, -46.654239), mapTypeId: google.maps.MapTypeId.ROADMAP } //Cria o mapa do google, coloca as definições do mapa, como tipo de visualização, pode ser ROADMAP, SATELLITE, HYBRID, TERRAIN map = new google.maps.Map(mapDiv, mapOptions); var control = document.createElement('DIV'); control.style.padding = '1px'; control.style.border = '1px solid #000'; control.style.backgroundColor = 'white'; control.style.cursor = 'pointer'; control.innerHTML = '<img src="http://i47.tinypic.com/2dlp2fc.jpg" border="0" alt="Image and video hosting by TinyPic">'; control.index = 1; map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control); google.maps.event.addDomListener(control, 'click', function() { doMark = false; markNow(); }); google.maps.event.addListener(map, "click", function(event) { if (!wayA) { wayA = new google.maps.Marker({ position: event.latLng, map: map }); } else { wayB = new google.maps.Marker({ position: event.latLng, map: map }); //Renderiza a rota, o draggable é diz se o waypoint é arrastavel ou não ren = new google.maps.DirectionsRenderer({ 'draggable': true }); ren.setMap(map); ren.setPanel(document.getElementById("directionsPanel")); ser = new google.maps.DirectionsService(); //Cria a rota, o DirectionTravelMode pode ser: DRIVING, WALKING, BICYCLING ou TRANSIT ser.route({ 'origin': wayA.getPosition(), 'destination': wayB.getPosition(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, function(res, sts) { if (sts == 'OK') ren.setDirections(res); }) } }); } var html = "<table>" + "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" + "<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" + "<tr><td>Tipo:</td> <td><select id='type'>" + "<option value='oficina' SELECTED>oficina</option>" + "<option value='restaurante'>restaurante</option>" + "</select> </td></tr>" + "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/></td></tr>"; infowindow = new google.maps.InfoWindow({ content: html }); google.maps.event.addDomListener(window, 'load', goma); 
 html, body { height: 100%; width: 100%; } 
 <script src="http://maps.google.com/maps/api/js"></script> <div id="mappy" style="float:left;width:70%; height:100%"></div> <div id="directionsPanel" style="float:right;width:30%;height 100%"></div> <div> <label>Endereco</label> </div>
+6
source

More articles:


All Articles