Um pouco de Google Maps neste Natal

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!!!

Anúncios

2 pensamentos sobre “Um pouco de Google Maps neste Natal

  1. Pingback: PowerShell – Especial de Natal « SQL From Hell.com

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s