javascript - marcadores - google.maps.marker example

¿Dibuja una línea entre dos puntos en un mapa de Google usando jQuery?

Question

¿Cómo dibujar una línea entre dos puntos (latitud y longitud) con la API de Google Maps usando jQuery o Javascript? Necesito el camino más corto entre los dos puntos. Puede ser cualquier tipo de línea.

Answer 1

Aquí hay una forma API v3 de dibujar una línea.

var line = new google.maps.Polyline({
path: [
new google.maps.LatLng(37.4419, -122.1419),
new google.maps.LatLng(37.4519, -122.1519)
],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 10,
map: map
});

Esto simplemente dibuja una línea recta entre dos puntos. Si desea que sea el camino más corto , debe tener en cuenta el hecho de que la Tierra está curvada y dibujar una línea geodésica. Para hacerlo, debe usar la biblioteca de geometría en la API de Google Maps, agregando este parámetro de bibliotecas opcional:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

Y luego simplemente agregue geodesic: true a las opciones para su polilínea:

var line = new google.maps.Polyline({
path: [new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.4519, -122.1519)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 10,
geodesic: true,
map: map
});

Answer 2

Esto dibuja una línea entre dos puntos ... y más allá. Simplemente continúe ingresando nuevos lugares en el cuadro de búsqueda y seguirá trazando los puntos entre los dos puntos más recientes:

VER EJEMPLO DE TRABAJO AQUÍ

HTML:

<div id="inputDiv">
<input id="startvalue" type="text" width="90" value="" autofocus placeholder="Keep Adding Places and searching...">
</div>
<div id="map"></div>
<div id="results"></div>

JS:

var geocoder;
var map;
var location1;
var location2;
$(document).ready(function(){
initialize();
$("#startvalue").on(''keydown'',function(event){
if (event.keyCode == 13 ) {
createLine();
$(this).val("");
$(this).focus();
}
});
})
function initialize(){
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(7.5653, 80.4303);
var mapOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
setZoom();
var input = /** @type {HTMLInputElement} */(
document.getElementById(''startvalue''));
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
}
var address;
var address2;
function createLine(){
if (address){
address2 = document.getElementById(''startvalue'').value;
} else {
address = document.getElementById(''startvalue'').value;
}
var temp, temp2;
geocoder.geocode({ ''address'': address }, function (results, status) {
// if (status != "OK") alert("geocode of address:"+address+" failed, status="+status);
temp = results[0].geometry.location;
if (address2){
geocoder.geocode({ ''address'': address2 }, function (results, status) {
// if (status != "OK") alert("geocode of address:"+address+" failed, status="+status);
temp2 = results[0].geometry.location;
document.getElementById(''results'').innerHTML += temp2.toUrlValue()+"<br>";
var route = [
temp,
temp2
];
var polyline = new google.maps.Polyline({
path: route,
strokeColor: "#FF5E56",
strokeOpacity: 0.6,
strokeWeight: 5
});
location1 = convertLocationToLatLong(temp.toUrlValue())
location2 = convertLocationToLatLong(temp2.toUrlValue())
var lengthInMeters = google.maps.geometry.spherical.computeLength(polyline.getPath());
document.getElementById(''results'').innerHTML += "Polyline is "+lengthInMeters+" meters long<br>";
polyline.setMap(map);
plotMap(location1,location2);
});
address = address2;
} else {
location1 = convertLocationToLatLong(temp.toUrlValue());
plotMap(location1);
}
});
}
function convertLocationToLatLong(location){
var location = location.split('','').map(function(item) {
return parseFloat(item);
});
return location
}
function plotMap(location1,location2){
var location1 = new google.maps.LatLng(location1[0],location1[1]);
if (location2){
var location2 = new google.maps.LatLng(location2[0],location2[1]);
}
var bounds = new google.maps.LatLngBounds();
bounds.extend(location1);
if(location2){
bounds.extend(location2);
}
map.fitBounds(bounds);
setZoom();
}
function setZoom(){
google.maps.event.addListener(map, ''zoom_changed'', function() {
zoomChangeBoundsListener =
google.maps.event.addListener(map, ''bounds_changed'', function(event) {
if (this.getZoom() > 15 && this.initialZoom == true) {
// Change max/min zoom here
this.setZoom(15);
this.initialZoom = false;
}
google.maps.event.removeListener(zoomChangeBoundsListener);
});
});
map.initialZoom = true;
}

CSS:

#map {
margin: 0;
padding: 0;
height: 400px;
margin-top:30px;
width:100%;
}
#inputDiv{
position:absolute;
top:0;
}
#startvalue{
width:300px;
padding:8px;
}

Answer 3

Solo para API v2!

El siguiente fragmento de código crea una polilínea roja de 10 píxeles de ancho entre dos puntos:

var polyline = new GPolyline([
new GLatLng(37.4419, -122.1419),
new GLatLng(37.4519, -122.1519)],
"#ff0000", 10);
map.addOverlay(polyline);

Puedes encontrar la documentación here .