Nesta semana, eu pensei em fazer um artigo de natal utilizando alguma feature do SQL Server, mas achei interessante usar um pouco de HTML procurando um resultado legal com a Google Maps API 3, que é um dos assuntos do treinamento que estou dando esta semana:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Feliz Natal</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#map
{
width: 100%;
height: 500px;
border: 1px solid #000;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var logo = "http://umpoucodetudo.files.wordpress.com/2008/12/natal2.jpg";
var texto = "<a href=\"" + logo + "\">"
+ "<h3>Santa Claus House</h3>"
+ "</a>";
(function() {
window.onload = function() {
var mapDiv = document.getElementById('map');
var latlng = new google.maps.LatLng(64.755034, -147.343091);
var options = {
center: latlng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapDiv, options);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: texto
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
})();
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>
Abrindo o HTML, clique sobre o ponto indicado:

E o resultado:

Ref: http://umpoucodetudo.files.wordpress.com/2008/12/natal2.jpg
Quem tiver interesse na API do Google Maps, recomendo a leitura do livro:
Apress Beginning Google Maps API 3:
http://www.amazon.com/Beginning-Google-Maps-API-3/dp/1430228024
Então pessoas, tenham um Feliz Natal e um Ano Novo com muito SQL!!!
muito interessante os resultados!