Regla para medir distancia en GOOGLE MAPS

Joel Valdez

unread,

Sep 12, 2015, 5:22:18 PM9/12/15

to opengts

Buenas hay alguna forma de poder integrar al mapa una regla para calcular distancia?, o si algun otro mapa trae algo parecido y como configurar? Muy agradecido desde ya.

trackeri...@gmail.com

unread,

Sep 26, 2015, 8:23:04 PM9/26/15

to opengts

hola joel, yo lo hice con php y que abriera una ventana emergente y ahí se hacen la mediciones

Joel Valdez

unread,

Sep 28, 2015, 2:24:20 PM9/28/15

to opengts

Se puede ver una muestra o algo asi? me interesa. Saludos

Tracker

unread,

Sep 30, 2015, 2:37:06 PM9/30/15

to opengts

claro, si quieres te envio el codigo totalmente gratis

Tracker

unread,

Sep 30, 2015, 2:41:13 PM9/30/15

to opengts

abajo te copio el codigo completo de una herramienta para medir, mira el codigo y puedes usar lo que quieras de el incluso modificarlo a tu gusto...

!DOCTYPE html>

<html>

<head>

<title> Herramienta De Medicion </title>

// INICiALIZACION DE MAPA: CREO MAPA, MARCADORES, CENTRO EL ZOOM, DIBUJO LINEA, DIBUJO ETIQUETAS

function initialize() {

geocoder = new google.maps.Geocoder();

latLng = new google.maps.LatLng(9.01430,-79.5220);

latLng2 = new google.maps.LatLng(9.01495,-79.5230);

latLng3 = new google.maps.LatLng(9.01497,-79.5235);

map = new google.maps.Map(document.getElementById('mapCanvas'), {

zoom:10,

center: latLng,

mapTypeId: google.maps.MapTypeId.ROADMAP

});

/// CREACION DEL MARCADOR P3

var image = 'img/3.png';

marker = new google.maps.Marker({

position: latLng2,

title: 'Punto C',

map: map,

draggable: true,

icon: image

});

// CREACION DEL MARCADOR P2

var image = 'img/1.png';

marker2 = new google.maps.Marker({

position: latLng2,

title: 'Punto A',

map: map,

draggable: true,

icon: image,

});

// CREACION DEL MARCADOR P1

var image = 'img/2.png';

marker3 = new google.maps.Marker({

position: latLng2,

title: 'Punto intermedio',

map: map,

draggable: true,

icon: image

});

// Escucho el CLICK sobre el mama y si se produce actualizo la posicion del marcador

google.maps.event.addListener(map, 'click', function(event) {

updateMarker(event.latLng);

ib.open(map, this);

});

// geocodePosition(latLng);

// Permito los eventos drag/drop sobre marcador P1 (marker)

google.maps.event.addListener(marker, 'dragstart', function() {

updatePolyline ();

});

google.maps.event.addListener (marker, 'drag', function() {

updatePolyline ();

});

google.maps.event.addListener(marker, 'dragend', function() {

updatePolyline ();

//geocodePosition(marker.getPosition());

});

// Permito los eventos drag/drop sobre ambos marcador P2

google.maps.event.addListener(marker2, 'dragstart', function() {

updatePolyline ();

});

google.maps.event.addListener(marker2, 'drag', function() {

updatePolyline ();

});

google.maps.event.addListener(marker2, 'dragend', function() {

updatePolyline ();

});

// Permito los eventos drag/drop sobre ambos marcador P2

google.maps.event.addListener(marker3, 'dragstart', function() {

updatePolyline ();

});

google.maps.event.addListener(marker3, 'drag', function() {

updatePolyline ();

});

google.maps.event.addListener(marker3, 'dragend', function() {

updatePolyline ();

});

// CENTRO EL MAPA UTILIZANDO fitBound,

// para ello creo el array bounds, a¤ado todos mis marcadores

var bounds = new google.maps.LatLngBounds();

bounds.extend(latLng);

bounds.extend(latLng2);

bounds.extend(latLng3);

map.fitBounds(bounds);

// Esto es necesario para que se pueda reajustar el zoom

google.maps.event.addListener(map, 'zoom_changed', function() {

zoomChangeBoundsListener =

google.maps.event.addListener(map, 'bounds_changed', function(event) {

if (this.getZoom() > 18 && this.initialZoom == true) {

// Change max/min zoom here

this.setZoom(18);

this.initialZoom = false;

}

// this.setZoom(17);

google.maps.event.removeListener(zoomChangeBoundsListener);

});

// Ahora realizo el ajuste de forma que quede el zoom ajustado

// y los marcadores centrados

map.initialZoom = true;

map.fitBounds(bounds);

//INICIALIZACION POLILINEA

flightPlanCoordinates = [

latLng, latLng3,latLng2 ];

flightPath = new google.maps.Polyline({

path: flightPlanCoordinates,

strokeWeight: 6,

strokeOpacity: "0.4",

strokeColor: '#0000FF'

});

flightPath.setMap(map);

// ETIQUETAS PARA LAS DISTANCIAS

label1 = new Label({ map: map });

label1.set('zIndex', 1234);

label1.bindTo('position', marker, 'position');

label1.set('text', '');

label2 = new Label({ map: map });

label2.set('zIndex', 1234);

label2.bindTo('position', marker2, 'position');

label2.set('text', '');

label3 = new Label({ map: map });

label3.set('zIndex', 1234);

label3.bindTo('position', marker3, 'position');

label3.set('text', '');

updatePolyline();

} // FIN INICIALIZACION

// REDIBUJA LA POLILINEA EN EL MAPA

function updatePolyline() {

// Borro la linea anterior

flightPath.setMap(null);

// CALCULO LAS NUEVAS POSICIONES DE LOS MARCADORES

var l1=marker.getPosition();

var l2=marker2.getPosition();

var l3=marker3.getPosition();

// DIBUJO LA POLILINEA

flightPath.setPath([l1, l3, l2]);

flightPath.setMap(map);

// CALCULO LAS DISTANCIAS NUEVAS Y LAS IMPRIMO

var dist_a= Math.round(google.maps.geometry.spherical.computeDistanceBetween (l2, l3));

var dist_b= Math.round(google.maps.geometry.spherical.computeDistanceBetween (l1, l3));

var dist_t= dist_a+dist_b;

label1.set('text', dist_t+' mts');

label2.set('text', dist_a+' mts');

label3.set('text', dist_b+' mts');

}

// ACTUALIZO LA POSICION DEL MARCADOR 3 AL HACER CLICK

function updateMarker(location) {

marker.setPosition(location);

marker2.setPosition(location);

marker3.setPosition(location);

updatePolyline();

}

// CALCULO LA DISTANCIA TOTAL

</script>

<style>

*

{

border: 0;

margin: 0;

padding:0

}

body

{

background: lavender;

font-family: Helvetica;

font-size: 16px

text-align: center;

}

fieldset

{

backgrounf: white;

broder: thin solid skyblue;

border-radius: 1em;

padding: 1em;

}

#mapCanvas {

width: 80%;

height: 450px;

margin: auto;

border-radius: 1em;

padding: 1em

#text{

font-size: 20px

}

</style>

</head>

</style>

</fieldset>

</body>

</html>

El lunes, 28 de septiembre de 2015, 13:24:20 (UTC-5), Joel Valdez escribió:

adolfo troncoso

unread,

Sep 30, 2015, 11:01:47 PM9/30/15

to opengts

select @DISTANCIA= ACOS(SIN(PI()*@LAT1/180.0)*SIN(PI()*@LAT2/180.0)+COS(PI()*@LAT1/180.0)*COS(PI()*@LAT2/180.0)*COS(PI()*@LONG2/180.0-PI()*@LONG1/180.0))*6371

Listo

Hernan Diaz

unread,

Oct 1, 2015, 12:45:56 AM10/1/15

to opengts

Excelente código ,practico y bien comentado.

Me atrevi a hacerle algunos cambios para que sea funcional y monolítico.


<!DOCTYPE html>
<html>
<head>
<title> Herramienta De Medicion </title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src=" http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/src/markerwithlabel.js"></script>

<script type="text/javascript">



// INICiALIZACION DE MAPA: CREO MAPA, MARCADORES, CENTRO EL ZOOM, DIBUJO LINEA, DIBUJO ETIQUETAS
function initialize() {
  
  geocoder = new google.maps.Geocoder();	

  latLng = new google.maps.LatLng(9.01430,-79.5220);
  latLng2 = new google.maps.LatLng(9.01495,-79.5230);

  map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom:10,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

/// CREACION DEL MARCADOR  P3

     var image = 'http://maps.google.com/mapfiles/ms/icons/red.png';
    marker = new MarkerWithLabel({
    position: latLng,

    title: 'Punto A',
    map: map,
	draggable: true,

    icon: image
  });

// CREACION DEL MARCADOR  P2

    var image = 'http://maps.google.com/mapfiles/ms/icons/blue.png';
    marker2 = new MarkerWithLabel({
    position: latLng2,
    title: 'Punto B',
    map: map,
	labelContent: "---",
    labelAnchor: new google.maps.Point(33, 0),
    labelClass: "labels", // the CSS class for the label
    labelStyle: {opacity: 0.75},

    draggable: true,
    icon: image,
   });

// Escucho el CLICK sobre el mama y si se produce actualizo la posicion del marcador

   google.maps.event.addListener(marker, 'dragend', function() {
    updatePolyline ();

  });

	google.maps.event.addListener(marker2, 'dragend', function() {
    updatePolyline ();
  });

 // CENTRO EL MAPA UTILIZANDO fitBound, 
 // para ello creo el array bounds, a¤ado todos mis marcadores
 
var bounds = new google.maps.LatLngBounds();
bounds.extend(latLng);
bounds.extend(latLng2);

map.fitBounds(bounds);

// Esto es necesario para que se pueda reajustar el zoom  
google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomChangeBoundsListener = 
        google.maps.event.addListener(map, 'bounds_changed', function(event) {
            if (this.getZoom() > 18 && this.initialZoom == true) {
                // Change max/min zoom here
                this.setZoom(18);
                this.initialZoom = false;
            }
        // this.setZoom(17);    
        google.maps.event.removeListener(zoomChangeBoundsListener);
    });
});
// Ahora realizo el ajuste de forma que quede el zoom ajustado
// y los marcadores centrados
map.initialZoom = true;
map.fitBounds(bounds);
  
//INICIALIZACION POLILINEA
  
    flightPlanCoordinates = [

latLng,latLng2 ];

    
    
    flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeWeight: 6,
    strokeOpacity: "0.4", 
    strokeColor: '#0000FF'
      });

  flightPath.setMap(map);

// updatePolyline();

   
} // FIN INICIALIZACION
 
 
// REDIBUJA LA POLILINEA EN EL MAPA
function updatePolyline() {	
  // Borro la linea anterior	
  flightPath.setMap(null);
  
  // CALCULO LAS NUEVAS POSICIONES DE LOS MARCADORES
  var l1=marker.getPosition();
  var l2=marker2.getPosition();

  // DIBUJO LA POLILINEA
  flightPath.setPath([l1, l2]);

  flightPath.setMap(map);
  
  // CALCULO LAS DISTANCIAS NUEVAS Y LAS IMPRIMO

  var dist_a= Math.round(google.maps.geometry.spherical.computeDistanceBetween (l1, l2));

	marker2.set("labelContent", dist_a+' mts');

 
  
}



// ACTUALIZO LA POSICION DEL MARCADOR 3 AL HACER CLICK
function updateMarker(location) {

  .labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 29px;
     font-weight: bold;
     text-align: center;
     
     border: 1px solid black;
     white-space: nowrap;

Tracker

unread,

Oct 1, 2015, 1:13:56 AM10/1/15

to opengts

Gracias por tus aportes hernan, soy @ayudante en tu blog.

Interesado en compartir, aprender y sin ánimos de lucro....

Joel Valdez

unread,

Oct 1, 2015, 7:29:07 PM10/1/15

to opengts

Este codigo como integro a opengts?

Saludos.

Tracker

unread,

Oct 3, 2015, 10:12:49 AM10/3/15

to opengts

creo que esa parte te tocaria practicarla tu mismo.... como pista usas el codigo js. imprimes en el map. usas el trackMap.java, el trackMap.js.... como te dije averígualo tu mismo, de eso te trata... de aprender.... saludos

Lizardo Durand

unread,

Oct 3, 2015, 2:08:31 PM10/3/15

to ope...@googlegroups.com

Perfecto trackerit.

ese es el modelo que debe existir en el grupo.

y gracias por el aporte.

saludos.

--
Has recibido este mensaje porque estás suscrito al grupo "opengts" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a opengts+u...@googlegroups.com.
Para acceder a más opciones, visita https://groups.google.com/d/optout.

--

--
Sinceramente,
Lizardo Durand
----------------------------------------------------------
D & D SOLUCIONES EMPRESARIALES
Tecnologia de Informacion y Contabilidad

Teléfax: (511) 567-4849 | Celular: (511) 9 91319988 | Nextel: 99 100*5971 |

www.sedyd.com | Paginas web | Desarrollo de Sistemas | Comercio Electronico

www.geozoone.com | GPS, Plataforma de Monitoreo Satelital

Hernan Diaz

unread,

Oct 3, 2015, 2:33:40 PM10/3/15

to opengts, ldu...@sedyd.com

+1

Joel Valdez

unread,

Oct 7, 2015, 9:50:34 PM10/7/15

to opengts

Buenas noches, que botones deberia usar para que me tome los 2 puntos y me de la medida? La regla extiendo, pero al hacer click no me sale nada, y se queda "pegado" con el mouse la regla.

Gracias.

Sin título.jpg

Joel Valdez

unread,

Oct 7, 2015, 9:50:38 PM10/7/15

to opengts

Buenas noches, que botones deberia usar para que me tome los 2 puntos y me de la medida? La regla extiendo, pero al hacer click no me sale nada, y se queda "pegado" con el mouse la regla.

Gracias

El sábado, 12 de septiembre de 2015, 17:22:18 (UTC-4), Joel Valdez escribió:

Sin título.jpg

Tron Software

unread,

Oct 7, 2015, 11:04:47 PM10/7/15

to ope...@googlegroups.com

--
Has recibido este mensaje porque estás suscrito a un tema del grupo "opengts" de Grupos de Google.
Para anular la suscripción a este tema, visita https://groups.google.com/d/topic/opengts/UPFMlhA7qdA/unsubscribe.
Para anular la suscripción a este grupo y a todos sus temas, envía un correo electrónico a opengts+u...@googlegroups.com.

Para acceder a más opciones, visita https://groups.google.com/d/optout.

--

One Love, One Life, One Choice

Joel Valdez

unread,

Oct 11, 2015, 4:33:32 AM10/11/15

to opengts

Pero en ves de salirme la medida me sale "PUNTO INTERMEDIO" porque sera?

Sin título.jpg

Reply all

Reply to author

Forward