<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_canvas"), myOptions);
}
function initialize()
{
if(geo_position_js.init())
{
document.getElementById('current').innerHTML="Recibiendo Información...";
geo_position_js.getCurrentPosition(show_position,function(){document.getElementById('current').innerHTML="No puede ubicar posición"},{enableHighAccuracy:true});
}
else
{
document.getElementById('current').innerHTML="Funcionalidad no disponible";
}
}
function show_position(p)
{
document.getElementById('current').innerHTML="Latitud= "+p.coords.latitude.toFixed(2)+" Longitud= "+p.coords.longitude.toFixed(2);
var pos=new google.maps.LatLng(p.coords.latitude,p.coords.longitude);
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='Guardar' 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>