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&v=2&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"> </th>
<td width="225"><div align="center"><strong class="s">Add Sites for your Circuit</strong></div></td>
<td width="286"> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </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"> </th>
<td><div id="map_canvas" style="width: 600px; height: 400px"></div> </td>
<td> </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"> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td><input type="button" value="Save City" id="savecity" onclick="save()" disabled="disabled" /></td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</center>
</body>
</html>