[SOLUCIONADO] unir marcadores con google maps

maximendez88 · #1 (**permalink**) 20/09/2012, 13:41

buenas estoy intentando marcar una ruta con el google maps... en mi formulario pido que se agreguen ciudades y quiero que cada vez que se agrega una ciudad, este unida con una linea... he logrado que cada vez que agrego una ciudad lo haga en diferentes marcadores... lo que aun no puedo lograr es que estos marcadores esten unidos con una linea... alguien puede echarme una mano?

este es mi codigo de google maps

Código HTML:



 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyA07VHJApYzXc3uJgFEk4l04KaSABLyaVA"
      type="text/javascript"></script>
    <script type="text/javascript">

    var map = null;
    var geocoder = null;
	
    function initialize() {
      if (GBrowserIsCompatible()) {
		  
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 1);
		map.setMapType(G_HYBRID_MAP);
        map.setUIToDefault();
        geocoder = new GClientGeocoder();
      }
    }
	
	

    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
				
				
				
              map.setCenter(point, 6);
              var marker = new GMarker(point, {draggable: true});
              map.addOverlay(marker);
			  
			  
			  map.addOverlay(polyline);
			  
			  
			  
              
			  
			  
			  GEvent.addListener(marker, "dragend", function() {
                
				 document.getElementById('lat').value=marker.getPoint().lat();
                 document.getElementById('long').value=marker.getPoint().lng();
              });
              GEvent.addListener(marker, "click", function() {
                
				 document.getElementById('lat').value=marker.getPoint().lat();
                 document.getElementById('long').value=marker.getPoint().lng();
              });
			  
			  
			  
			  
	      GEvent.trigger(marker, "click");
            }
          }
        );
      }
    }
	
	
	
	
 

	
    </script>

Naahuel · #2 (**permalink**) 20/09/2012, 14:31

Me tomé el trabajo de ordenar tu código y convertirlo a la versión 3 de la API. Esto es porque en la versión que utilizas no se podía usar setPath() (o al menos yo no podía). Además la v3 es más limpia y moderna. Además comenté el código para hacer bien claro qué se hace paso a paso:

Código Javascript:

Ver original//variables y objetos globales
var map             //mapa
var geocoder;       //geocoder
var _path = [];     // ruta
var _poliLinea = new google.maps.Polyline({ //polilinea
    path: _path,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});
 
//inicializo
initialize();
 
//cargo un par de ciudades de ejemplo
showAddress('buenos aires');
showAddress('montevideo');
showAddress('sao paulo');
 
function initialize() {
    //centrado
    var myLatLng = new google.maps.LatLng(37.4419, -122.1419);
    //opciones
    var mapOptions = {
        zoom: 1,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    //geocoder
    geocoder = new google.maps.Geocoder();
    //creo mapa
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    
    //asigno polilinea al mapa
    _poliLinea.setMap(map);
}
 
function showAddress(s_address) {
    var address = s_address;
    //busco la direccion dada
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        //centro el mapa en el resultado
        map.setCenter(results[0].geometry.location);
        //creo marcador
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
        //agrego punto a la linea
        agregarRuta(results[0].geometry.location)
      } else {
        alert('Error: ' + status);
      }
    });
 }
 
function agregarRuta(o_punto){
    //creo punto a partir de la dirección dada
    var o_LL = new google.maps.LatLng(o_punto.Xa, o_punto.Ya)
    //agrego el punto al array de la ruta
    _path.push(o_LL);
    //cargo la nueva ruta en la polilinea
    _poliLinea.setPath(_path);
    //centro el mapa en el último punto
    map.setCenter(o_LL);
    //Hago un poco de zoom
    map.setZoom(6);
}

-edit-
Este es el script que tenés que incluir ahora:

Código HTML:

Ver original<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Acá lo ves en funcionamiento: http://jsbin.com/uzizow/1/

maximendez88 · #3 (**permalink**) 20/09/2012, 15:13

muchas gracias por la respuesta... el problema es que yo no mostre el html del codigo.... en realidad lo que intento hacer es mas complejo que solo mostrar una linea ya predefinida... o sea yo voy agregando sitios en un formulario con un input y aparte de eso... tmb tengo dos inputs abajo a los cuales le cargo la latitud y la longitud... te dejo mi html completo para que lo entiendas mejor lo que quiero hacer... y con respecto a la version 3 de google maps.... he intentado actualizar pero hay algo que hago mal.... en el script que me pasaste hay que poner la apikey?? saludos

te dejo mi html completo

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Trip Minded - Add Site</title>





<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyA07VHJApYzXc3uJgFEk4l04KaSABLyaVA"type="text/javascript"></script>
<script type="text/javascript">
    var map = null;
    var geocoder = null;
	
    function initialize() {
      if (GBrowserIsCompatible()) {	  
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 1);
		map.setMapType(G_HYBRID_MAP);
        map.setUIToDefault();
        geocoder = new GClientGeocoder();
      }
    }
	
	
	
	


	
	
	
	
	
	
	
    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
				document.getElementById('add').disabled=false;
              alert(address + " not found");
            } else {
							
              map.setCenter(point, 6);
              var marker = new GMarker(point, {draggable: true});
              map.addOverlay(marker);		  
			  GEvent.addListener(marker, "dragend", function() {  
				 document.getElementById('lat').value=marker.getPoint().lat();
                 document.getElementById('long').value=marker.getPoint().lng();
              });
              GEvent.addListener(marker, "click", function() {
				 document.getElementById('lat').value=marker.getPoint().lat();
                 document.getElementById('long').value=marker.getPoint().lng();
              });
			  
				  
	      GEvent.trigger(marker, "click");  
		  
		  
		  
		  
	
		  
		  
		  
		  
            }
          }
        );
      }
    }

</script>
















	<link rel="stylesheet" href="colorbox.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script src="http://tripminded.com/app/circuits/colorbox/jquery.colorbox.js"></script>
		<script>
			$(document).ready(function(){
				//Examples of how to assign the ColorBox event to elements
				$(".group1").colorbox({rel:'group1'});
				$(".group2").colorbox({rel:'group2', transition:"fade"});
				$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
				$(".group4").colorbox({rel:'group4', slideshow:true});
				$(".ajax").colorbox();
				$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
				$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
				$(".inline").colorbox({inline:true, width:"50%"});
				$(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});
				
				//Example of preserving a JavaScript event for inline calls.
				$("#click").click(function(){ 
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});
			});
			
			
			
			
		
			
			
		</script>





	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>



<script language="javascript">


$(function() {
		$( "#datepicker" ).datepicker({
			changeMonth: true,
			changeYear: true,
			yearRange: "1930:2010",
			dateFormat: "yy-mm-dd"
		});
		
		
		
	});




   function activar(){
      document.getElementById('more').disabled = false;
	  document.getElementById('add').disabled=true;
	  document.getElementById('savecity').disabled=false;
    }


   function othercity(){
      document.getElementById('add').disabled = false;
	  document.getElementById('address').value="Select other city";
	  document.getElementById('more').disabled=true;
	  document.getElementById('other').disabled=true;
	  
    }
	
	
	function save(){
		document.getElementById('other').disabled=false;
		document.getElementById('savecity').disabled=true;
		document.getElementById('more').disabled=true;
	}
	
	
	
	

</script>

























</head>

  <body onLoad="initialize()" onUnload="GUnload()">





<center>



<form action="#" onSubmit="showAddress(this.address.value); return false" method="post">

<table width="800" border="1">
  <tr>
    <th width="267" scope="row">&nbsp;</th>
    <td width="225"><div align="center"><strong class="s">Add Sites for your Circuit</strong></div></td>
    <td width="286">&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Select your Destiny:</th>
    <td><input type="text" style="width:500px" name="address" id="address" value="Select your destiny" onfocus="javascript:this.value=''"  />
      <input type="submit" value="Add Site!" onClick="activar()" id="add" /></td>
    
    <td align="center"><a class='inline' href="#inline_content" style="text-decoration:none; font-weight:bold; font-size:18px;"><input type="button" value="+" id="more" disabled="disabled"  ></a>
        
        
        
		
		<!-- This contains the hidden content for inline calls -->
		<div style='display:none'>
			<div id='inline_content' style='padding:10px; background:#fff;'>
            
            
            <center>
            
		    <table>
    
    
    <tr>
    
    <td>Arrival Date:</td>
    <td><input type="text" name="arrival" id="datepicker" readonly="readonly"></td>
    
    
    </tr>
    
    
    <tr>
    
    <td>Departure Date:</td>
    
    <td><input type="text" name="departure" id="datepicker" readonly="readonly"></td>
    
    
    </tr>
    
    
    
    <td>Adjuntar una Foto</td>
    <td><input type="file" /></td>
    
    </table>
    
    
    </center>
    
			</div>
		</div>
    
    
    
    </td>
    
    
    
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td><div id="map_canvas" style="width: 600px; height: 400px"></div> </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Latitud:</th>
    <td><input type="text" id="lat" name="lat" style="width:500px;" readonly="readonly" /></td>
    <td align="center"><input type="button" value="Add another city" id="other" onClick="othercity()" disabled="disabled" /> </td>
  </tr>
  <tr>
    <th scope="row">Longitud:</th>
    <td><input type="text" id="long" name="long" style="width:500px;" readonly="readonly" /></td>
    <td align="center">&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td><input type="button" value="Save City"  id="savecity" onclick="save()" disabled="disabled" /></td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>



</form>




</center>




</body>
</html>

Naahuel · #4 (**permalink**) 20/09/2012, 15:23

Era un ejemplo... no son predefinidos. Hasta dejé el mismo nombre de la función showAddress.

Con suerte, sólo tenés que reemplazar el código nuevo y cambiar a la versión v3.

Te paso un ejemplo más elaborado. La única modificación al script que te hice anteriormente es que le saqué las llamadas a showAddress() que eran de ejemplo. Agregué un input para poner el nombre de la ciudad e ir actualizando el mapa y la línea.

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<title>Test Google Maps</title>
</head>
<body>
    <!-- MAPA -->
    <div id="map_canvas" style="width: 600px; height: 600px;"></div>
    <input type="text" name="ciudad" id="ciudad" /> <button onclick="agregarCiudad();">Agregar</button>
    
    <!-- funcion para agregar ciudad. La separo porque es sólo ejemplo -->
    <script type="text/javascript">
        function agregarCiudad(){
            showAddress(document.getElementById('ciudad').value);
            document.getElementById('ciudad').value = '';
        }
    </script>
    
    <script type="text/javascript">
    //variables y objetos globales
    var map             //mapa
    var geocoder;       //geocoder
    var _path = [];     // ruta
    var _poliLinea = new google.maps.Polyline({ //polilinea
        path: _path,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
 
    //inicializo
    initialize();
 
    function initialize() {
        //centrado
        var myLatLng = new google.maps.LatLng(37.4419, -122.1419);
        //opciones
        var mapOptions = {
            zoom: 1,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        //geocoder
        geocoder = new google.maps.Geocoder();
        //creo mapa
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        
        //asigno polilinea al mapa
        _poliLinea.setMap(map);
    }
 
    function showAddress(s_address) {
        var address = s_address;
        //busco la direccion dada
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            //centro el mapa en el resultado
            map.setCenter(results[0].geometry.location);
            //creo marcador
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            //agrego punto a la linea
            agregarRuta(results[0].geometry.location)
          } else {
            alert('Error: ' + status);
          }
        });
     }
     
    function agregarRuta(o_punto){
        //creo punto a partir de la dirección dada
        var o_LL = new google.maps.LatLng(o_punto.Xa, o_punto.Ya)
        //agrego el punto al array de la ruta
        _path.push(o_LL);
        //cargo la nueva ruta en la polilinea
        _poliLinea.setPath(_path);
        //centro el mapa en el último punto
        map.setCenter(o_LL);
        //Hago un poco de zoom
        map.setZoom(6);
    }
    </script>
</body>
</html>

Ahí podés ver cómo se agrega la nueva versión de google maps. No hace falta Key, es uno de los cambios de la versión 3.

Estoy 100% seguro que se puede adaptar a tu código. Perdón, pero es toda la ayuda que te puedo dar. Creo que con el código comentado que te dí no vas a tener dudas sobre cómo hacerlo.

maximendez88 · #5 (**permalink**) 20/09/2012, 15:28

muy grosso!! loco!!! muchas gracias!!! como quiero a los argentinos!! realmente somos hermanos!

Naahuel · #6 (**permalink**) 20/09/2012, 20:21

Un placer :)

maximendez88 · #7 (**permalink**) 24/10/2012, 01:05

amigo.. me habia servido a la perfeccion tu codigo... hasta que magicamente ahora no funciona... tenes idea de por q? saludos

Naahuel · #8 (**permalink**) 24/10/2012, 05:19

Buenas. A mi también me pareció muy extraño. Revisando el código, vi que Google había cambiado los nombres de sus objetos. Yo para obtener la Lat y Lng del punto usaba:

Código JavaScript:

Ver originalo_punto.Xa, o_punto.Ya

Pero ahora esas propiedades ya no se llama más así, son Ya y Za, respectivamente. Leyendo descubrí que el error es mio por hacer referencia directamente a esas propiedades y no usar los métodos internos en su lugar. Correctamente, hay que hacer esto:

Código Javascript:

Ver originalo_punto.lat(), o_punto.lng()

Cambiá eso y debería funcionar. Saludos!

maximendez88 · #9 (**permalink**) 24/10/2012, 06:21

muchas gracias por la ayuda! la verdad casi me muero... cuando magicamente dejo de funcionar!!

maximendez88 · #10 (**permalink**) 24/10/2012, 13:37

tengo la pregunta del millon.... como se hace para guardar las rutas que voy creando? hay alguna forma? la necesito para mostrarla... en otra url... saludos

#11 (**permalink**) 24/10/2012, 14:39

Cita:

Iniciado por maximendez88

tengo la pregunta del millon.... como se hace para guardar las rutas que voy creando? hay alguna forma? la necesito para mostrarla... en otra url... saludos

Particularmente comenzaría por hacerme otras preguntas:
- ¿Me es útil una ruta trazada como polilínea con trazos rectos entre puntos? ¿O buscaría alternativas de rutas a pie, en coche, poder moldearlas a algo más próximo a la vida real?
- ¿Necesito otros datos alternativos?: redireccionamientos en rutas, gráficos de altitudes, ...
- ¿El usuario podrá actuar en búsqueda de rutas alternativas, prolongación de éllas desde o hacia su posición actual o hacia otras direcciones posteriores ... ?

Google maps te permite en "cómo llegar" generar rutas con puntos intermedios y guardar estos mapas para después llevarlos a tu web.

Estructurar tus propios mapas con tus rutas es trabajar con json, kml, base de datos u otro tipo de archivos y después leerlos desde tu página.

Existe abundante literatura para cada tipo de codificación.

maximendez88 · #12 (**permalink**) 26/10/2012, 13:40

Cita:

Iniciado por txemaarbulo

Particularmente comenzaría por hacerme otras preguntas:
- ¿Me es útil una ruta trazada como polilínea con trazos rectos entre puntos? ¿O buscaría alternativas de rutas a pie, en coche, poder moldearlas a algo más próximo a la vida real?

esa pregunta ya me la he hecho...... me gustaria mas que nada... lineas curvas en vez de lineas rectas.... pero... nunca encontre como llevarla a cabo... me gustaria tener ejemplos... practicos.... para hallarme un poco... soy nuevo en esto de google maps

#13 (**permalink**) 26/10/2012, 14:36

Cita:

Iniciado por maximendez88

... me gustaria tener ejemplos... practicos.... para hallarme un poco... soy nuevo en esto de google maps

Para ir entrando en tema puedes ver:
https://developers.google.com/maps/d...ript/reference
https://developers.google.com/maps/d...cript/examples
https://developers.google.com/maps/d...pt/demogallery

Si añades a la URL ?hl=es la tendrás en español (al estilo traductor google)

Después, por tu cuenta puedes ir probando y mezclando códigos.

Un ejemplo con rutas que me ayudó mucho cuando comenzaba fue
http://www.geocodezip.com/v3_elevati..._distance.html
Tienes cinco rutas y cuatro modos de ruta.

maximendez88 · #14 (**permalink**) 06/11/2012, 13:47

Cita:

Iniciado por Naahuel

Era un ejemplo... no son predefinidos. Hasta dejé el mismo nombre de la función showAddress.

Con suerte, sólo tenés que reemplazar el código nuevo y cambiar a la versión v3.

Te paso un ejemplo más elaborado. La única modificación al script que te hice anteriormente es que le saqué las llamadas a showAddress() que eran de ejemplo. Agregué un input para poner el nombre de la ciudad e ir actualizando el mapa y la línea.

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<title>Test Google Maps</title>
</head>
<body>
    <!-- MAPA -->
    <div id="map_canvas" style="width: 600px; height: 600px;"></div>
    <input type="text" name="ciudad" id="ciudad" /> <button onclick="agregarCiudad();">Agregar</button>
    
    <!-- funcion para agregar ciudad. La separo porque es sólo ejemplo -->
    <script type="text/javascript">
        function agregarCiudad(){
            showAddress(document.getElementById('ciudad').value);
            document.getElementById('ciudad').value = '';
        }
    </script>
    
    <script type="text/javascript">
    //variables y objetos globales
    var map             //mapa
    var geocoder;       //geocoder
    var _path = [];     // ruta
    var _poliLinea = new google.maps.Polyline({ //polilinea
        path: _path,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
 
    //inicializo
    initialize();
 
    function initialize() {
        //centrado
        var myLatLng = new google.maps.LatLng(37.4419, -122.1419);
        //opciones
        var mapOptions = {
            zoom: 1,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        //geocoder
        geocoder = new google.maps.Geocoder();
        //creo mapa
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        
        //asigno polilinea al mapa
        _poliLinea.setMap(map);
    }
 
    function showAddress(s_address) {
        var address = s_address;
        //busco la direccion dada
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            //centro el mapa en el resultado
            map.setCenter(results[0].geometry.location);
            //creo marcador
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            //agrego punto a la linea
            agregarRuta(results[0].geometry.location)
          } else {
            alert('Error: ' + status);
          }
        });
     }
     
    function agregarRuta(o_punto){
        //creo punto a partir de la dirección dada
        var o_LL = new google.maps.LatLng(o_punto.Xa, o_punto.Ya)
        //agrego el punto al array de la ruta
        _path.push(o_LL);
        //cargo la nueva ruta en la polilinea
        _poliLinea.setPath(_path);
        //centro el mapa en el último punto
        map.setCenter(o_LL);
        //Hago un poco de zoom
        map.setZoom(6);
    }
    </script>
</body>
</html>

Ahí podés ver cómo se agrega la nueva versión de google maps. No hace falta Key, es uno de los cambios de la versión 3.

Estoy 100% seguro que se puede adaptar a tu código. Perdón, pero es toda la ayuda que te puedo dar. Creo que con el código comentado que te dí no vas a tener dudas sobre cómo hacerlo.

Como seria para que la linea que marca la ruta en vez de que sea recta... sea curva? saludos

Naahuel · #15 (**permalink**) 11/11/2012, 12:32

Tarde, pero seguro :P

Se podría usar el parámetro geodesic para las polilineas. Lo que hace es dibujar la distancia más corta tomando en cuenta la curvatura de la tierra. Sólo se notará la curvatura en distancias largas, eso si.

Te lo dejo en el ejemplo:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<title>Test Google Maps</title>
</head>
<body>
    <!-- MAPA -->
    <div id="map_canvas" style="width: 600px; height: 600px;"></div>
    <input type="text" name="ciudad" id="ciudad" /> <button onclick="agregarCiudad();">Agregar</button>
    
    <!-- funcion para agregar ciudad. La separo porque es sólo ejemplo -->
    <script type="text/javascript">
        function agregarCiudad(){
            showAddress(document.getElementById('ciudad').value);
            document.getElementById('ciudad').value = '';
        }
    </script>
    
    <script type="text/javascript">
    //variables y objetos globales
    var map             //mapa
    var geocoder;       //geocoder
    var _path = [];     // ruta
    var _poliLinea = new google.maps.Polyline({ //polilinea
        path: _path,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        geodesic: true
    });
 
    //inicializo
    initialize();
 
    function initialize() {
        //centrado
        var myLatLng = new google.maps.LatLng(37.4419, -122.1419);
        //opciones
        var mapOptions = {
            zoom: 1,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        //geocoder
        geocoder = new google.maps.Geocoder();
        //creo mapa
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        
        //asigno polilinea al mapa
        _poliLinea.setMap(map);
    }
 
    function showAddress(s_address) {
        var address = s_address;
        //busco la direccion dada
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            //centro el mapa en el resultado
            map.setCenter(results[0].geometry.location);
            //creo marcador
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            //agrego punto a la linea
            agregarRuta(results[0].geometry.location)
          } else {
            alert('Error: ' + status);
          }
        });
     }
     
    function agregarRuta(o_punto){
        //creo punto a partir de la dirección dada
        var o_LL = new google.maps.LatLng(o_punto.lat(), o_punto.lng())
        //agrego el punto al array de la ruta
        _path.push(o_LL);
        //cargo la nueva ruta en la polilinea
        _poliLinea.setPath(_path);
        //centro el mapa en el último punto
        map.setCenter(o_LL);
        //Hago un poco de zoom
        map.setZoom(6);
    }
    </script>
</body>
</html>

Naahuel · #16 (**permalink**) 26/11/2012, 18:43

Te dejo un ejemplo de una posible solución para guardar las ubicaciones.

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<title>Test Google Maps</title>
</head>
<body>
    <!-- MAPA -->
    <div id="map_canvas" style="width: 600px; height: 600px;"></div>
    <input type="text" name="ciudad" id="ciudad" /> <button onclick="agregarCiudad();">Agregar</button>
    
    <!-- funcion para agregar ciudad. La separo porque es sólo ejemplo -->
    <script type="text/javascript">
        function agregarCiudad(){
            showAddress(document.getElementById('ciudad').value);
            document.getElementById('ciudad').value = '';
        }
    </script>
    
    <script type="text/javascript">
    //variables y objetos globales
    var map             //mapa
    var geocoder;       //geocoder
    var _path = [];     // ruta vacía
    var _ciudades = new Array(); // ciudades que se cargaron para guardar
 
    
    var _poliLinea = new google.maps.Polyline({ //polilinea
        path: _path,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
 
    //inicializo
    initialize();
 
    function initialize() {
        //centrado
        var myLatLng = new google.maps.LatLng(37.4419, -122.1419);
        //opciones
        var mapOptions = {
            zoom: 1,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        //geocoder
        geocoder = new google.maps.Geocoder();
        //creo mapa
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        
        //asigno polilinea al mapa
        _poliLinea.setMap(map);
 
        //verifico si hay ciudades guardadas en localStorage
        if(localStorage['ciudades']){
            __ciudad = JSON.parse(localStorage['ciudades']);
            //agrego cada ciudad que se guardó
            for(i=0;i<__ciudad.length;i++){
                showAddress(__ciudad[i]);
            }
        }
 
 
    }
 
    function showAddress(s_address) {
        var address = s_address;
        //busco la direccion dada
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            //centro el mapa en el resultado
            map.setCenter(results[0].geometry.location);
            //creo marcador
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            //agrego punto a la linea
            agregarRuta(results[0].geometry.location)
            
            //guardo la ciudad en LocalStorage
            _ciudades.push(results[0].formatted_address);
            localStorage['ciudades'] = JSON.stringify(_ciudades);
 
          } else {
            alert('Error: ' + status);
          }
        });
     }
     
    function agregarRuta(o_punto){
 
        //creo punto a partir de la dirección dada
        var o_LL = new google.maps.LatLng(o_punto.lat(), o_punto.lng())
        //agrego el punto al array de la ruta
        _path.push(o_LL);
        //cargo la nueva ruta en la polilinea
        _poliLinea.setPath(_path);
        //centro el mapa en el último punto
        map.setCenter(o_LL);
        //Hago un poco de zoom
        map.setZoom(6);
    }
 
    </script>
</body>
</html>

Digo posible porque estoy usando una nueva funcionalidad llamada localStorage y JSON.parse() y JSON.stringify(). La primera permite almacenar contenido desde JavaScript en el navegador, el cual estará disponible después cuando yo lo necesite. Su soporte es relativamente bueno: http://www.html5rocks.com/en/features/storage

Si te fijás en el ejemplo, podés encontrar las líneas que guardan y que restauran lo que se guardo cuando se entre una segunda vez.

La otra opción podría ser usar cookies, pero eso requeriría también usar AJAX para guardar cada ciudad que se agregue en la cookie. Luego, al cargar la página, verificar si existe la cookie y cargar las ciudades que se guardaron.

Naahuel · #17 (**permalink**) 26/11/2012, 18:44

Me olvidé de mencionar, que para que el ejemplo funcione con localStorage en IE (8+) este debe estar ejecutándose en un servidor.

maximendez88 · #18 (**permalink**) 27/11/2012, 10:38

excelente!!! gracias por la respuesta voy a probar a usar lo que me enseñaste... a ver como me va...

maximendez88 · #19 (**permalink**) 05/12/2012, 10:20

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<title>Test Google Maps</title>
</head>
<body>
    <!-- MAPA -->
    <div id="map_canvas" style="width: 600px; height: 600px;"></div>
    <input type="text" name="ciudad" id="ciudad" /> <button onclick="agregarCiudad();">Agregar</button>
    
    <!-- funcion para agregar ciudad. La separo porque es sólo ejemplo -->
    <script type="text/javascript">
        function agregarCiudad(){
            showAddress(document.getElementById('ciudad').value);
            document.getElementById('ciudad').value = '';
        }
    </script>
    
    <script type="text/javascript">
    //variables y objetos globales
    var map             //mapa
    var geocoder;       //geocoder
    var _path = [];     // ruta vacía
    var _ciudades = new Array(); // ciudades que se cargaron para guardar
 
    
    var _poliLinea = new google.maps.Polyline({ //polilinea
        path: _path,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
 
    //inicializo
    initialize();
 
    function initialize() {
        //centrado
        var myLatLng = new google.maps.LatLng(37.4419, -122.1419);
        //opciones
        var mapOptions = {
            zoom: 1,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        //geocoder
        geocoder = new google.maps.Geocoder();
        //creo mapa
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        
        //asigno polilinea al mapa
        _poliLinea.setMap(map);
 
        //verifico si hay ciudades guardadas en localStorage
        if(localStorage['ciudades']){
            __ciudad = JSON.parse(localStorage['ciudades']);
            //agrego cada ciudad que se guardó
            for(i=0;i<__ciudad.length;i++){
                showAddress(__ciudad[i]);
            }
        }
 
 
    }
 
    function showAddress(s_address) {
        var address = s_address;
        //busco la direccion dada
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            //centro el mapa en el resultado
            map.setCenter(results[0].geometry.location);
            //creo marcador
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            //agrego punto a la linea
            agregarRuta(results[0].geometry.location)
            
            //guardo la ciudad en LocalStorage
            _ciudades.push(results[0].formatted_address);
            localStorage['ciudades'] = JSON.stringify(_ciudades);
 
          } else {
            alert('Error: ' + status);
          }
        });
     }
     
    function agregarRuta(o_punto){
 
        //creo punto a partir de la dirección dada
        var o_LL = new google.maps.LatLng(o_punto.lat(), o_punto.lng())
        //agrego el punto al array de la ruta
        _path.push(o_LL);
        //cargo la nueva ruta en la polilinea
        _poliLinea.setPath(_path);
        //centro el mapa en el último punto
        map.setCenter(o_LL);
        //Hago un poco de zoom
        map.setZoom(6);
    }
 
    </script>
</body>
</html>

bueno, he estado utilizando el código que me pasaste...localmente me funciono, solo que cuando lo pruebo en mi servidor no funciona... cada vez que actualizo el navegador pierdo la ruta que fui marcando...

Naahuel · #20 (**permalink**) 08/12/2012, 06:40

A mi me funciona perfecto en el servidor:
http://nahueljose.com.ar/ejemplos/go...ne/index2.html

maximendez88 · #21 (**permalink**) 14/12/2012, 12:01

al final lo logre!!! muchas gracias por tu tiempo y por tu ayuda

excelente!!

:a rriba: