Como carregar o Google Map JQuery Dialog


Neste artigo vou mostrar-lhe como colocar um mapa do Google com um determinado endereço de ponto na caixa de diálogo JQuery. Você precisa ter o JavaScript poucas referências para carregar o mapa do google no diálogo Jquery. Essas são referência Google map API, biblioteca JQuery jQuery UI Núcleo referência em uma página html estática.

Criar caixa de diálogo JQuery

Criar uma página web html5 vazio e adicione o seguinte jQuery referências. Há duas maneiras de adicionar referência Jquery. Você pode baixar as bibliotecas jQuery e jQuery UI na pasta de trabalho e bibliotecas de referência podem ser encontrados localmente ou hospedado como um Google hospedado bibliotecas jQuery ou código. Você pode adicionar o seguinte código em sua página html teve seção logo abaixo da tag title.




Aqui eu estou usando as referências de biblioteca do Google. Agora bibliotecas jQuery estão no lugar, vamos adicionar diálogo JQuery UI. Para possibilitar o diálogo Jquery eu vou usar um botão. Você pode adicionar o seguinte fragmento de código em sua página html corpo.

Agora somos capazes de criar um diálogo com JQuery seguinte script. Você precisa adicionar este código no cabeçalho nas referências de script.

Acima de código irá gerar uma base de caixa de diálogo como abaixo;

Agora você pode adicionar alguns parâmetros básicos para o diálogo Jquer para torná-lo melhor e estável. Aqui eu vou estar passando a altura, largura, título, eo estado modal. Portanto, o seu apelo de diálogo modal será alterado da seguinte forma;

$ ("# Mapcanvas") janela ({title: "Seu Map Location", height: 500, width: 500, modal: true});.

Agora você verá uma saída da seguinte forma;

Definir o Google Map API

Agora, a sua caixa de diálogo Jquery está pronto para lançar o mapa google com a localização desejada endereço. Adiciona a seguinte referência Javascript no topo da página.

Google Map API fornece um objeto muito útil chamado geocoder para manipular mapas do Google usando JavaScript. Este objecto expõe um método chamado geocódigo (). Este método leva parâmetro endereço e retorna o resultado do estado e a posição geométrica. Se o método é chamado com sucesso, então você vai ter a localização exata do endereço, e muitos detalhes do mesmo. Você pode usar o seguinte código para criar um google map simples e marcar o seu endereço. Assim, você pode comentar sobre a caixa de código JQuery e adicionar esse código abaixo dela;

var geocoder = new google.maps.Geocoder (); // Cria o geocoder // Chamar o geocode function () geocoder.geocode ({endereço: "3/46 Hunter Street Dubbo NSW 2830"}, de função (resultados, status) { if (estado == google.maps.GeocoderStatus.OK) { // opções de mapa de parâmetro MapOptions var = {center: resultados [0] .geometry.location, Level: 15, mapTypeId: google.maps.MapTypeId.ROADMAP}; // Cria o mapa para desenhar endereço de localização map = new google.maps.Map (document.getElementById ('mapcanvas'), MapOptions); // Cria o ponto no mapa marcadoras var = new google.maps.Marker ({mapa: mapa, posição: resultados [0] .geometry.location}); } });

Como você pode ver que eu estou passando o endereço de um barbante e estou verificando o geocoderstatus voltou, se tudo correr bem, então ele é chamado um sucesso. Em seguida eu estou usando a posição do objeto de resultado para criar o mapa parâmetro opções. Localização Resultado contém a longitude e latitude detalhes de seus dados de endereço. Os outros dois parâmetros são o tipo de mapa eo zoom número. Número Zoom amplia o mapa para o tamanho especificado. Agora você precisa fazer uma pequena alteração ao mapa canvas css div da seguinte forma;

Agora salve e atualize a página e clique no mapa você terá a seguinte saída;

Agora vamos carregar a janela do mapa em Jquery. Para fazer isso você precisa de mudar estilos mapcanvas div da seguinte forma;

Isto irá esconder o div até que eles são carregados com o mapa. Agora, depois de colocar o papel na div que podemos chamar a função de diálogo dentro do mapa chamado abelhas que se segue; var geocoder = new google.maps.Geocoder (); // Cria o geocoder // Chamar o geocode function () geocoder.geocode ({endereço: "3/46 Hunter Street Dubbo NSW 2830"}, de função (resultados, status) { if (estado == google.maps.GeocoderStatus.OK) { // opções de mapa de parâmetro MapOptions var = {center: resultados [0] .geometry.location, Level: 15, mapTypeId: google.maps.MapTypeId.ROADMAP}; // Cria o mapa para desenhar endereço de localização map = new google.maps.Map (document.getElementById ('mapcanvas'), MapOptions); // Cria o ponto no mapa marcadoras var = new google.maps.Marker ({mapa: mapa, posição: resultados [0] .geometry.location}); // Janela Chamada $ ("# Mapcanvas") janela ({title: "Seu Map Location", height: 500, width: 500, modal: true});. } });

Com a alteração do código acima, quando o usuário clica no botão do mapa vai primeiro criar um mapa do Google com o ponto de endereço. Após o ponto de sinal mapa que você pode ligar para o Diálogo Jquery. Então mapcanvas div será carregado como um diálogo Jquery como mostrado abaixo;

Você pode melhorar o código um pouco "com a adição de uma caixa de texto para dar o endereço. Permite adicionar uma caixa de texto para dar qualquer localização de endereços. Copie o seguinte trecho de código a sua página web;

Agora você precisa fazer uma pequena alteração ao mapa de chamadas API. Isto é, em vez de usar a seqüência de endereço vai passar caixa de texto de entrada do usuário, como cadeia de endereço. Você pode modificar o código da seguinte forma;

var geocoder = new google.maps.Geocoder (); // Cria o geocoder // Chamar o geocode function () geocoder.geocode ({endereço: $ ("# txtAddress") Val ().}, function (resultados, status) { if (estado == google.maps.GeocoderStatus.OK) { // opções de mapa de parâmetro MapOptions var = {center: resultados [0] .geometry.location, Level: 15, mapTypeId: google.maps.MapTypeId.ROADMAP}; // Cria o mapa para desenhar endereço de localização map = new google.maps.Map (document.getElementById ('mapcanvas'), MapOptions); // Cria o ponto no mapa marcadoras var = new google.maps.Marker ({mapa: mapa, posição: resultados [0] .geometry.location}); // Janela Chamada $ ("# Mapcanvas") janela ({title: "Seu Map Location", height: 500, width: 500, modal: true});. } });

Como você pode ver agora que não estamos usando a seqüência de texto da cadeia de endereço estático. Salve o código e atualizar a página. Isto irá abrir uma página da seguinte forma;

Você pode conferir a demonstração ao vivo aqui

(0)
(0)

Comentários - 0

Sem comentários

Adicionar um comentário

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Caracteres restantes: 3000
captcha