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

About these ads

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

Você está comentando usando sua conta WordPress.com. Sair / Mudar )

Imagem do Twitter

Você está comentando usando sua conta Twitter. Sair / Mudar )

Foto do Facebook

Você está comentando usando sua conta Facebook. Sair / Mudar )

Conectando a %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.

Junte-se a 346 outros seguidores

%d bloggers like this: