I'm making a google maps project and need to create a route clicking on it.
My project has 2 points that has a predefined lat and lng, and I want to draw by myself the start and the end of the point A and B and don't lose it functionality.
I made another project that you can click to draw the route but it don't have markers, and is not draggabble, this is my actual project with the full code I will post here a short code only with my directions.
I want that my first click to the point A and the second my point B, and them the possibility to drag them, like the project linked
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'm updating here my code, I done only wayA, that is the first waypoint, the second is a latLng predefined, where you click, it gets the latLng and put inside the '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);
})
Concept: (sounds like this is what you want)
(if this what you are trying and are running into problems, code or a live link would be helpful)
You are missing #3 and #4
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="https://web.archive.org/web/20151226013612if_/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="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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>