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 .