El fichero html será:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="css/v1/nioos.css" rel="stylesheet" />
<script type="text/javascript" src="js/v1/nioosapp.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<title>Nioos</title>
</head>
<body>
<div class="barra-busqueda">
<label>Dirección :</label>
<input id="direccion" type="text" />
<input type="button" value="Buscar" onclick="geolocalizar()" />
</div>
<div id="mapa"></div>
<script type="text/javascript">
initApp();
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<link href="css/v1/nioos.css" rel="stylesheet" />
<script type="text/javascript" src="js/v1/nioosapp.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<title>Nioos</title>
</head>
<body>
<div class="barra-busqueda">
<label>Dirección :</label>
<input id="direccion" type="text" />
<input type="button" value="Buscar" onclick="geolocalizar()" />
</div>
<div id="mapa"></div>
<script type="text/javascript">
initApp();
</script>
</body>
</html>
Donde:
La línea
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true">
carga las APIs de Google Maps.
La línea
<script type="text/javascript" src="https://www.google.com/jsapi">
es el cargador de las APIs de búsqueda de Google, con el que podremos cargar las APIs de búsqueda de noticias.La aplicación javascript será:
var nioos = {};
function initApp() {
google.load("search", "1");
google.setOnLoadCallback(afterGoogleLoad);
}
function afterGoogleLoad() {
var divMapa = document.getElementById("mapa");
var madrid = new google.maps.LatLng(40.416691, -3.700345);
var myOptions = {
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: madrid
};
var map = new google.maps.Map(divMapa, myOptions);
nioos.map = map;
//
var geocoder = new google.maps.Geocoder();
nioos.geocoder = geocoder;
//
google.maps.event.addListener(map, 'bounds_changed', function() {
var timer = nioos.timer;
clearTimeout(timer);
timer = setTimeout(boundsChangedListener, 3000);
nioos.timer = timer;
});
//
google.maps.event.addListener(map, 'click', function() {
closeInfoWindow();
});
}
function closeInfoWindow() {
var infoWindow = nioos.infoWindow;
if (infoWindow) {
infoWindow.close();
}
var oldInfoWindow = nioos.oldInfoWindow;
if (oldInfoWindow) {
oldInfoWindow.close();
}
}
function boundsChangedListener() {
var map = nioos.map;
var center = map.getCenter();
nioos.geocoder.geocode(
{'latLng': center},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var direccion = extraerDireccion(results);
buscarNoticias(direccion, center);
} else {
alert('Se desconoce la dirección debido a : ' + status);
}
}
);
}
function extraerDireccion(results) {
var direccion = results[0].formatted_address;
var address_components = results[0].address_components;
for (var i = 0; i < address_components.length; i++) {
var cmp = address_components[i];
var types = cmp.types;
if (types == "postal_code") {
var postal_code = cmp.long_name;
direccion = direccion.replace(postal_code, "");
}
}
direccion = direccion.replace(" ", " ");
direccion = direccion.replace(/, /g, " +");
return direccion;
}
function buscarNoticias(direccion, center) {
var newsSearch = new google.search.NewsSearch();
newsSearch.setResultSetSize(1);
newsSearch.setSearchCompleteCallback(this, searchComplete, [center, newsSearch]);
newsSearch.execute(direccion);
}
function searchComplete(center, newsSearch) {
if (newsSearch.results && newsSearch.results.length > 0) {
var newsResult = newsSearch.results[0];
var title = newsResult.titleNoFormatting;
if (nioos[title]) {
return;
}
var content = newsResult.html;
var map = nioos.map;
nioos[title] = content;
var marker = new google.maps.Marker({
position: center,
map: map,
title: title
});
var infoWindow = new google.maps.InfoWindow({
content: content
});
nioos.infoWindow = infoWindow;
google.maps.event.addListener(marker, 'click', function() {
closeInfoWindow();
nioos.oldInfoWindow = infoWindow;
infoWindow.open(map, marker);
});
}
}
function geolocalizar() {
var direccion = document.getElementById("direccion").value;
nioos.geocoder.geocode(
{
'address': direccion
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location = results[0].geometry.location;
nioos.map.setCenter(location);
} else {
alert('Dirección ' + direccion + ' desconocida');
}
}
);
}
Donde:
La función
function initApp() {
google.load("search", "1");
google.setOnLoadCallback(afterGoogleLoad);
}
se encargar de cargar las APIs de búsqueda (método 'google.load("search", "1")') y de llamar a la función "afterGoogleLoad" cuando se han terminado de cargar.
La función "afterGoogleLoad()" se encarga de "pintar" el mapa y asignarle las correspondientes respuestas a eventos.
Cuando el usuario efectua una búsqueda se ejecuta el método "buscarNoticias(direccion, center)" que, usando el objeto "google.search.NewsSearch()" se encarga de buscar las noticias y mostrarlas en el mapa.
No hay comentarios:
Publicar un comentario