google-maps - marcadores - google.maps.marker example

Google Maps API V3: ¿Cómo se muestra la dirección desde un punto A hasta un punto B(línea azul)?

Question

Tengo latitud y longitud para 2 puntos en la base de datos, quiero que mi Google Map muestre una ruta desde el punto A al punto B ...

Como vemos here (Direcciones de Google Maps)

¿Cómo dibujar esa línea de dirección en el mapa?

Answer 1

Usando Javascript

Creé una demostración operativa que muestra cómo usar el servicio de indicaciones API de Google Maps en Javascript a través de un

• Objeto DirectionsService para enviar y recibir solicitudes de dirección
• Objeto DirectionsRenderer para representar la ruta devuelta en el mapa

function initMap() {
var pointA = new google.maps.LatLng(51.7519, -1.2578),
pointB = new google.maps.LatLng(50.8429, -0.1313),
myOptions = {
zoom: 7,
center: pointA
},
map = new google.maps.Map(document.getElementById(''map-canvas''), myOptions),
// Instantiate a directions service.
directionsService = new google.maps.DirectionsService,
directionsDisplay = new google.maps.DirectionsRenderer({
map: map
}),
markerA = new google.maps.Marker({
position: pointA,
title: "point A",
label: "A",
map: map
}),
markerB = new google.maps.Marker({
position: pointB,
title: "point B",
label: "B",
map: map
});
// get route from A to B
calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
directionsService.route({
origin: pointA,
destination: pointB,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert(''Directions request failed due to '' + status);
}
});
}
initMap();

 html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

También en Jsfiddle: http://jsfiddle.net/user2314737/u9no8te4/

Uso de los servicios web de Google Maps

Puede usar los servicios web utilizando una API_KEY emitiendo una solicitud como esta:

https://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&key=API_KEY

Se puede obtener una API_KEY en Google Developer Console con una cuota de 2,500 solicitudes gratuitas por día.

Una solicitud puede devolver resultados JSON o XML que se pueden usar para dibujar una ruta en un mapa.

La documentación oficial para los servicios web con la API de indicaciones de Google Maps está here

Answer 2

En su caso, aquí hay una implementación que usa el servicio de indicaciones .

function displayRoute() {
var start = new google.maps.LatLng(28.694004, 77.110291);
var end = new google.maps.LatLng(28.72082, 77.107241);
var directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object
directionsDisplay.setMap(map); // map should be already initialized.
var request = {
origin : start,
destination : end,
travelMode : google.maps.TravelMode.DRIVING
};
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}

Answer 3

Use las direcciones API .

Haz una llamada ajax, es decir

https://maps.googleapis.com/maps/api/directions/json?parameters

y luego analizar la respuesta

Answer 4

Utilice el servicio de indicaciones de Google Maps API v3. Básicamente es lo mismo que la API de indicaciones, pero está bien empaquetado en la API de Google Maps, que también proporciona una manera conveniente de renderizar fácilmente la ruta en el mapa.

Puede encontrar información y ejemplos sobre la representación de la ruta de indicaciones en el mapa en la sección de indicaciones de representación de la documentación de API de Google Maps v3.

Answer 5

 // First Initiate your map. Tie it to some ID in the HTML eg. ''MyMapID''
var map = new google.maps.Map(
document.getElementById(''MyMapID''),
{
center: {
lat: Some.latitude,
lng: Some.longitude
}
}
);
// Create a new directionsService object.
var directionsService = new google.maps.DirectionsService;
directionsService.route({
origin: origin.latitude +'',''+ origin.longitude,
destination: destination.latitude +'',''+ destination.longitude,
travelMode: ''DRIVING'',
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
map: map,
directions: response,
draggable: false,
suppressPolylines: true,
// IF YOU SET `suppressPolylines` TO FALSE, THE LINE WILL BE
// AUTOMATICALLY DRAWN FOR YOU.
});
// IF YOU WISH TO APPLY USER ACTIONS TO YOUR LINE YOU NEED TO CREATE A
// `polyLine` OBJECT BY LOOPING THROUGH THE RESPONSE ROUTES AND CREATING A
// LIST
pathPoints = response.routes[0].overview_path.map(function (location) {
return {lat: location.lat(), lng: location.lng()};
});
var assumedPath = new google.maps.Polyline({
path: pathPoints, //APPLY LIST TO PATH
geodesic: true,
strokeColor: ''#708090'',
strokeOpacity: 0.7,
strokeWeight: 2.5
});
assumedPath.setMap(map); // Set the path object to the map