21
dez
10

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


2 Respostas para “Um pouco de Google Maps neste Natal”


  1. 22/12/2010 às 19:00

    muito interessante os resultados! :D


Deixe uma resposta

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

WordPress.com Logo

You are commenting using your WordPress.com account. Sair / Alterar )

Imagem do Twitter

You are commenting using your Twitter account. Sair / Alterar )

Foto do Facebook

You are commenting using your Facebook account. Sair / Alterar )

Connecting to %s


Sobre o blog

Blog que há três anos trata de SQL Server, .NET Framework, PowerShell, soluções para problemas comuns e não tão comuns assim, informações sobre ferramentas diversas e o que vier na cabeça do MCT Paulo R. Pereira.

Twitter


Seguir

Obtenha todo post novo entregue na sua caixa de entrada.

Join 491 other followers