<?php
// Datos para la conexion
$host = 'localhost';
$database = 'XXXXXX';
$username = 'XXXXXX';
$password = 'XXXXXX';
// Conectarse a MySQL
$link = mysql_connect($host, $username, $password);
if (!$link) { echo('Error al conectarse a mysql: ' . mysql_error()); }
// Seleccionar nuestra base de datos
$db_selected = mysql_select_db($database, $link);
if (!$db_selected) { echo ('Error al abrir la base de datos: ' . mysql_error()); }
else { echo 'Conexion exitosa.';
}
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Maps</title>
<style type="text/css">
body { font: normal 10pt Helvetica, Arial; } #map { width: 100%; height: 500px;
border: 1px solid #000;
float: left; }
</style>
<script src="http://maps.google.com/maps/api/js?key=[Aqui_la_KEY]" type="text/javascript"></script>
<script type="text/javascript">
var ser,ren;
//icono del marker con sus propiedades
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/yellow.png", new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) { // Se agrega marcador var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({ position: pt,
icon: icon,
map: map
});
// mensaje arriba del marcador
var popup = new google.maps.InfoWindow({ content: info,
maxWidth: 300
});
// para que aparezca dando click al marcador
google.maps.event.addListener(marker, "click", function() { if (currentPopup != null) { currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
// para cerrar el mensaje
google.maps.event.addListener(popup, "closeclick", function() { map.panTo(center);
currentPopup = null;
});
} // Se inicia el mapa
function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(0, 0),
zoom: 14,
// barra de tipo de mapas a mostrar
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
// se hace la consulta a la base de datos tomando los datos de lat y lng
<?php
$query = mysql_query("SELECT * FROM suscriptor WHERE estado = '0'")or die(mysql_error()); while($row = mysql_fetch_array($query))
{ $name = $row['nombre'];
$lat = $row['latitud'];
$lon = $row['longitud'];
echo("addMarker($lat, $lon, '<b>$name</b><br />');\n"); }
?>
// para centrar
center = bounds.getCenter();
map.fitBounds(bounds);
}
function mostrar_Ruta(){ // prueba con polylineas const flightPlanCoordinates = [
{ lat:parseFloat(-38.7578241), lng:parseFloat(-72.6019587)}, { lat:parseFloat(-38.7620304), lng:parseFloat(-72.6049037)}, { lat:parseFloat(-38.7707594), lng:parseFloat(-72.603994)}, { lat:parseFloat(-38.7578769), lng:parseFloat(-72.5920453)}, { lat:parseFloat(-38.7627257), lng:parseFloat(-72.598419)}, { lat:parseFloat(-38.7759554), lng:parseFloat(-72.5908141)}, { lat:parseFloat(-38.7586012), lng:parseFloat(-72.6047108)}, { lat:parseFloat(-38.7771689), lng:parseFloat(-72.5930119)}, { lat:parseFloat(-38.7673079), lng:parseFloat(-72.6046763)} ];
// datos polylinea
const flightPath = new google.maps.Polyline({ path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#4285f4",
strokeOpacity: 1.0,
strokeWeight: 2,
});
// set al mapa
flightPath.setMap(map);
}
// funcion para el boton2 con waypoints
function mostrarRuta_2(){ const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
document.getElementById("submit2").addEventListener("click", () => { calculateAndDisplayRoute(directionsService, directionsRenderer);
});
}
function calculateAndDisplayRoute(directionsService, directionsRenderer) { var inicio = new google.maps.LatLng(-38.7578241,-72.6019587);
var destino = new google.maps.LatLng(-38.7409886,-72.6022371);
const waypts = [
{ location: {lat:-38.7578241, lng:-72.6019587, stopover: true }}, { location: {lat:-38.7620304, lng:-72.6049037, stopover: true}}, { location: {lat:-38.7707594, lng:-72.603994, stopover: true}}, { location: {lat:-38.7578769, lng:-72.5920453, stopover: true}}, { location: {lat:-38.7627257, lng:-72.598419, stopover: true}}, { location: {lat:-38.7759554, lng:-72.5908141, stopover: true}}, { location: {lat:-38.7586012, lng:-72.6047108, stopover: true}}, { location: {lat:-38.7771689, lng:-72.5930119, stopover: true}} ];
directionsService.route(
{ origin: inicio,
destination: destino,
waypoints: waypts,
travelMode: google.maps.TravelMode.DRIVING,
},
(response, status) => { if (status === "OK") { directionsRenderer.setDirections(response);
const route = response.routes[0];
const summaryPanel = document.getElementById("directions-panel"); summaryPanel.innerHTML = "";
// informacion de la ruta.
for (let i = 0; i < route.legs.length; i++) { const routeSegment = i + 1;
summaryPanel.innerHTML +=
"<b>Ruta: " + routeSegment + "</b><br>";
summaryPanel.innerHTML += route.legs[i].start_address + " to ";
summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
summaryPanel.innerHTML += route.legs[i].distance.text + "<br><br>";
}
} else { window.alert("Directions request failed due to " + status); }
});
}
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
<div id="botones">
<br/>
<input type="submit" id="submit" onclick="mostrar_Ruta()"/>
<br />
<input type="submit" id="submit2" onclick="mostrarRuta_2()" />
</div>
<div id="directions-panel">Distancia </div>
</body>
</html>
