Hola Dradi7 gracias por sus respuestas, le cuento que soy algo novato en el tema, cuando en el ejemplo
demo.html le agrego la llave me deja salir el mapa y me empiezan a salir otros errores, y finalmente no me muestra nada... como hago para que me guarde los datos del infowindow? la idea es que tome los datos de la coordenadas de la geolocalizacion que me genera el navegador.
Este es el código:
<html>
<head>
<meta name = "viewport" content = "width = device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<script src="js/gears_init.js" type="text/javascript" charset="utf-8"></script>
<script src="js/geo.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function initialize_map()
{
var myOptions = {
zoom: 15,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canva s"), myOptions);
}
function initialize()
{
if(geo_position_js.init())
{
document.getElementById('current').innerHTML="Reci biendo Información...";
geo_position_js.getCurrentPosition(show_position,f unction(){document.getElementById('current').inner HTML="No puede ubicar posición"},{enableHighAccuracy:true});
}
else
{
document.getElementById('current').innerHTML="Func ionalidad no disponible";
}
}
function show_position(p)
{
document.getElementById('current').innerHTML="Lati tud= "+p.coords.latitude.toFixed(2)+" Longitud= "+p.coords.longitude.toFixed(2);
var pos=new google.maps.LatLng(p.coords.latitude,p.coords.long itude);
map.setCenter(pos);
map.setZoom(16);
var infowindow = new google.maps.InfoWindow({
content: "<table>" +
"<tr><td></td></tr>" +
"<tr><td>Nombre:</td> <td><input type='text' id='name' value='Juan Gomez' readonly='readonly'/> </td> </tr>" +
"<tr><td>Dirección:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Opción:</td> <td><select id='type'>" +
"<option value='Opcion 1' SELECTED>Opción 1</option>" +
"<option value='Opción 2'>Opción 2</option>" +
"<option value='Opción 3'>Opción 3</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>"
});
function saveData() {
var name = escape(document.getElementById("name").value);
var address = escape(document.getElementById("address").value);
var type = document.getElementById("type").value;
var latlng = marker.getPosition();
var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
"&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
document.getElementById("message").innerHTML = "Ubicación Guardada.";
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
var marker = new google.maps.Marker({
position: pos,
map: map,
title:"Usted está Aquí"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script >
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size:10pt;
padding:0px;
margin:0px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #333;
}
#title {
background-color:#0066CC;
padding:5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #FFF;
}
#current {
font-size:10pt;
padding:5px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #333;
}
</style>
</head>
<body onLoad="initialize_map();initialize()">
<div id="title"><strong>Mostrar Posición en el Mapa</strong></div>
<div id="current">Inicializando...</div>
<div id="map_canvas" style="width:320px; height:350px"></div>
<div id="message"></div>
</body>
</html>
En el ejemplo de
phpsqlinfo_add2.html lo que quiero es que me produzca el marcador en la geolocalizacion y que pueda hacer click en el marcador para producir el infowindow con el formulario que guarde los datos.
***Le agradezco por su ayuda***