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-4f456322d92ed 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.
