SelectArea é um plugin jQuery de código aberto e serve para capturar as coordenadas de uma seleção em um determinado elemento HTML. Após o usuário criar uma seleção você terá as posição X e Y do primeiro ponto, segundo ponto e largura e altura da seleção.
Acesse o site do plugin e confira os exemplos de uso:
jQuery Plugin selectArea()
Neste post irei mostrar como é possível criar uma janela usando jQuery UI para inserir um mapa do Google Maps.
Para mais informações sobre o Google Maps JavaScript V3 API, consulte a documentção ou comente abaixo.
Primeiramente deve ser adicionado na sua página HTML o include da biblioteca de mapas do Google:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>[/crayon ]
Em seguida crie um novo bloco de javascript on de iremos configurar a criação de uma janela Dialog do jQuery UI e o mapa do Google.
Confira o código comentado abaixo:
[crayon-4fb94133443ff lang="javascript"]
var mapa;
$(function(){
var div = $('
');
div.dialog({
autoOpen:true,
//Iniciar com a janela aberta.
width:$('body').width()/2,
//A Largura da janela é a metade da largura da página
height:$('body').height()/2,
//A Altura da janela é a metade da altura da página
title:'Google Maps',
//Título da janela
});
var latlng = new google.maps.LatLng(-23.56316, -46.65389); //Posição global inicial (Latitude e Longitude)
//Criando um objeto Map (Mapa) do Google Maps
//O 1° parâmetro é o elemento HTML onde o mapa será exibido, o 2° é um objeto JSON com as opções personalizadas.
mapa = new google.maps.Map($('#janela')[0], {
zoom: 16, //Zoom inicial do mapa
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP //Tipo do mapa
});
//Criar um marcador de posição
new google.maps.Marker({
map: mapa, //Variável do objeto que contém o mapa que o marcador será adicionado
position: latlng //Posição global do marcador (Latitude e Longitude)
});
}); |
Confira um demo do resultado final da janela em jQuery UI com Google Maps.
Olá Pessoal,
Enfim podemos ver todos ou um aparte dos Doodles do Open Call HTML5 Challenge que desenvolvedores de 8 países fizeram.
Um Post oficial escrito pela Phoebe Peronto contém todos os “rabiscos”.
Para a minha alegria o meu Doodle está no meio! =D
Parabéns a todos os desenvolvedores… realmente estão muito criativos.
Agora é aguardar o tão esperado Google Developer Day 2011 que com certeza terá mais novidades do que vem por ai, tanto de tecnologias WEB em geral (HTML5, CSS3 e Javascript) quanto de APIs Google.
Para quem for, até lá 16 de Setembro de 2011, Sheraton WTC Hotel.
O mundo do Javascript