Eran otros tiempos y otros requisitos.
Por entonces exploré el tandem geoserver-openlayers.
Hoy nos toca pelearnos con la api de google-maps.
Importar las librerías.
Sacado de un ejemplo de la ayuda de google maps, tenemos lo siguiente.
<html>
<head>
...
<script
src="http://maps.google.com/maps?file=api&v=2&key=[KEY]"
type="text/javascript"></script>
...
</head>
<body>
...
</body>
</html>
KEY
Es necesario solicitar una KEY para utilizar la api de google aquí.
Crear Mapa Básico
Código básico para poner un mapa.
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
}
}
Establecer un Centro
<script type="text/javascript">
function LoadMapSearchControl() {
var options = {
zoomControl : GSmapSearchControl.ZOOM_CONTROL_ENABLE_ALL,
title : "málaga",
url : "http://www.google.com/corporate/index.html",
idleMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM,
activeMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM
}
new GSmapSearchControl(
document.getElementById("mapsearch"),
"1600 Amphitheatre Parkway, Mountain View, CA",
options
);
}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadMapSearchControl);
</script>
Cargar una marca en el mapa
var point = new GLatLng(lat,lon);
map.addOverlay(new GMarker(point));
Capturar la geo-referencia
GEvent.addListener(map, "click", function(overlay,latlng) {
if (latlng) {
var myHtml = "The GPoint value is: " + map.fromLatLngToDivPixel(latlng) + " at zoom level " + map.getZoom();
map.openInfoWindow(latlng, myHtml);
}
});
Y creo que con esto, tenemos para empezar!!
