[Resolvido] Google Map

Arturt · Setembro 19, 2009

Encontrei esse script para gerar localização de endereço no Google Map e não estou conseguindo fazer um request, trocar as variaveis das strings por dados do BD.

Alguém poderia me ajudar, agradeço desde já.

Obs: Estou estudando ASP e ainda estou muito pobre em desenvolvimento.

<%
dim googlemap
set googlemap=new cls_googleMap 'instantiate the GoogleMap class

'You need your own key to get this up and running!!
'You can get a key on http://code.google.com/apis/maps/signup.html
googlemap.key="ABQIAAAA8sW7uvK6oBjitNxqZo_qqBS2fp03KXNYLIxzhUK4aR9RUvnzcRS5mwUQYW2qh5e07no4skOjCQs-9Q" 'REPLACE THIS WITH YOUR OWN KEY!

'You can set some more properties for the GoogleMap, like zoomlevel, width, height, etc...
'googlemap.zoomlevel=11
'googlemap.width=500
'googlemap.height=400
'googlemap.useDelay=0 'number of ms to delay each address-search - 200 ms is very useful in case you have many addresses (>100)
'googlemap.errorMessage="This address was not found in Google Maps" 'leave empty in case you don't need this
'googlemap.noAddressSet="No address was set!" 'leave empty in case you don't need this
'googlemap.maptype="G_NORMAL_MAP" 'Most common: "G_NORMAL_MAP", "G_SATELLITE_MAP", "G_HYBRID_MAP"
'googlemap.enableGoogleBar=true 'show the Google Search Box bottom-left (true or false)
'googlemap.GLargeMapControl=true 'show the Large Map Control  (true or false)
'googlemap.GMapTypeControl=true 'show the 3 maptypes (true or false)
'googlemap.enableScrollWheelZoom=true
'googlemap.GOverviewMapControl=true 'show the zoom window bottom right
			
'Now you can add multiple address-objects to the GoogleMap-object
dim address
set address=new cls_address
address.city="Cidade"  '''''''''
address.country="Pais" '''''''''Quero trocar essas strings por dados do BD 
address.state="Estado" '''''''''
address.street="endereço"
address.html="This is the highest point in the region where I live.<br />Some HTML, like a <a href=""#"" onclick=""javascript:alert('or some javascript...');"">link</a>"
'You can also use address.street (this could also include the number somewhere), address.zip, address.state and address.countrycode

'You can set a custom icon for a marker (use a full or relative path to your image) - OPTIONAL!
address.iconURL="http://www.quickersite.com/userfiles/green-dot.png"

'you can set some HTML that will be shown when clicking the marker - OPTIONAL!


'finally, add the address-object to the addresses-collection
googlemap.addAddress (address)
set address=nothing



'show the Google Map
Response.Write googlemap.showMap ()

'that's it. Just destroy the map...
set googlemap=nothing
%>

Lucia_na · Setembro 19, 2009

Ola Arturt ..

Abaixo segue um código que uso hoje para meu site...

veja se te ajuda...está totalmente comentado é só mudar as variáveis e inserir a sua Key do google..

Espero ter ajudado.

<!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>	
<!--Insira o número da sua chave após a variável "key" na querystring abaixo -->
<script src="http://maps.google.com/maps?file=api&v=2&key= [b]MUDE AQUI PARA SUA KEY GERADA NO GOOGLE MAPS[/b]" type="text/javascript"></script>
<script type="text/javascript">
// Todas as variáveis utilizadas no sistema
// Referência para a instância de GMap2
var mapaobj;
// Referência para a instância de GClientGeocoder
var geocoder; 
// Array para mapear níveis de Zoom com a precisão do resultado
// Sinta-se livre para realizar o mapeamento achar mais conveniente.
// Note que quanto maior o número, maior o nível de zoom.
var nivelZoom = [];
    nivelZoom[0] = 2;
    nivelZoom[1] = 8;
    nivelZoom[2] = 9;
    nivelZoom[3] = 10;
    nivelZoom[4] = 12;
    nivelZoom[5] = 13;
    nivelZoom[6] = 14;
    nivelZoom[7] = 15;
    nivelZoom[8] = 16;
function inicializa()
{   
    // Cria o objeto principal referenciando a div 'mapa'
    mapaobj = new GMap2(document.getElementById("mapa"));
    // Centraliza o mapa na coordenada (34, 0) com nível de zoom 3
    mapaobj.setCenter(new GLatLng(0, 0), 14);
    // Cria o objeto que resolverá as consultas de endereço
    geocoder = new GClientGeocoder();
     // Adicionamos um controle de zoom e de translação do mapa.
   
    // Uma outra opção seria GSmallMapControl para um controle
    // diminuto
    mapaobj.addControl(new GLargeMapControl());
    // Adiciona as opções de visualização do mapa.
    // As opções disponíveis são: normal, híbrido e satélite
    mapaobj.addControl(new GMapTypeControl());
    //mapaobj.addControl(new GOverviewMapControl());
    
    realizaConsulta(); return false;    
    
    //mapaobj.addControl(new GHierarchicalMapTypeControl());
    // Iniciamos o mapa com as configuações que escolhemos inicialmente
}
// Função chamada quando o usuário envia a consulta
function realizaConsulta() 
{
    // Recebe o endereço digitado no campo 'consulta' do form
    var endereco = document.forms[0].consulta.value;
    // Realiza a consulta. resolverEnderecos é a função callback
    // Javascript que será chamada quando o método getLocations do 
    // objeto geocoder retornar uma resposta.
    geocoder.getLocations(endereco, resolverEnderecos);
}
// Callback para tratar o retorno de uma chamada ao método
// getLocations() do objeto geocoder. O parâmetro resposta será
// usado para acessar os dados retornados. resolverEnderecos também faz 
// uso da função listarLocais que será explicada adiante.
function resolverEnderecos(resposta) 
{
    // Retira todos os marcadores existentes no mapa.
    mapaobj.clearOverlays();         
    // Verifica o status da resposta
    if (!resposta || resposta.Status.code != G_GEO_SUCCESS) 
    {  
        // Caso a resposta seja inválida, exibe o motivo.
        alert("Nao foi possivel localizar o endereco solicitado");
        // Os códigos de erro são úteis para procurer o motivo
        // exato da falha na consulta de endereços na documentação
        // do GoogleMaps API       
    } else {
        // Caso o status da resposta seja G_GEO_SUCCESS,
        // iremos navegar em todos os resultados retornados,
        // que podem ser vários em caso de uma consulta ambígüa
        // Extrai o número de resultados retornados. O atributo
        // Placemark matém toda a informação de que precisamos
        // acerca das localidades encontradas.
        var num_resultados = resposta.Placemark.length;
        // Obtemos a referência DOM à div na qual os locais encontrados
        // serão listados através do Javascript
        var alvo = document.getElementById("locais");

        // Invoca a função listarLocais, explicada posteriormente
        listarLocais(alvo, resposta.Placemark);           

        // Caso haja múltiplos resultados, informa o fato ao usuário
        /*if (num_resultados > 1) {
              
              alert('A sua consulta retornou resultados ambígüos.' +
                    '\nEscolha a localidade mais adequada à consulta.');

        } else {*/

          // Caso haja um único resultado, 

          // Obtém uma referência ao endereço retornado
          var local = resposta.Placemark[0];

          // Extrai o um objeto GLatLng representando as coordenadas
          // do endereço solicitado
          var ponto = local.Point.coordinates;

          // Extrai a precisão do endereço. Accuracy é um número que
          // indica se o endereço retornado corresponde a um país, 
          // provincial, estado, cidade, bairro, rua, etc. Depende da
          // consulta que foi realizada. Com essa informação em mãos,
          // podemos decidir qual o nível de zoom mais adequado
          var acc = resposta.Placemark[0].AddressDetails.Accuracy;

          // Chama a função centralizaMapa passando como argumento
          // as coordenadas do ponto (posição 1 para latitude, 0 para
          // longitude); O endereço completo do ponto encontrado; a 
          // precisão do endereço para controlar o nível de zoom
         
         centralizaMapa(ponto[1],ponto[0],resposta.Placemark[0].address, acc);         
   //    }
    }
}
// Função lista as localizações encontradas na consulta.
// Os parâmetros são: alvo --> a referência DOM da div que receberá os 
// endereços; placemark --> referência a um array de objetos representando as
// localidades encontradas
function listarLocais(alvo, placemark) 
{
    //Começa a escrita na div informando a quantidade de resultados
    // encontrados. O máximo retornado pelo geocoder são seis endereços
                          //alvo.innerHTML = "<p> A pesquisa retornou " +
                         //placemark.length + " resultado(s): </p>";
    // Loop para escrever informações de cada endereço
    for (var i=0; i<placemark.length; ++i) 
    {
        // Obtém a informação da Unidade Federativa, no caso de um 
        // endereço no Brasil
        var uf = placemark[i].AddressDetails.Country
                            .AdministrativeArea.AdministrativeAreaName;	

        // Obtém a informação sobre a precisão do endereço  
	    var acc = placemark[i].AddressDetails.Accuracy;

        // Obtém um ponto GLatLng com as coordenadas da localidade i
        var p = placemark[i].Point.coordinates;
	  
        // Obtém o endereço textual completo
        var info = placemark[i].address;
	
        // Começa a escrita de um link para a função centralizaMapa do
        // endereço i encontrado
        //alvo.innerHTML +="<a href='javascript:centralizaMapa(" + p[1] + 
        //                "," + p[0] + ",\"" + info + "\", " + acc +
        //                ")'>" + placemark[i].address +"</a><br />";
      }
  } 
  // Função para centralizar o mapa no ponto solicitado
// Parâmetros: x à latitude; y à longitude; info à Um texto que será
// exibido em um quadro informativo que aponta para o endereço;
// acc à a precisão do endereço para utilizar o zoom adequado
function centralizaMapa(x, y, info, acc)
{  
   var nomeHotel = document.MyForm.nomeHotel.value;   
   var endereco = document.MyForm.consulta.value;
    // Cria um ponto GLatLng
    var p = new GLatLng(x, y);
    
    // Obtém o nível de zoom conforme a precisão do endereço
    var zoom = nivelZoom[6];

    // Define o novo centro do mapa e o seu novo nível de zoom
    mapaobj.setCenter(p,zoom);

    // Cria um novo marcador que sera exibido no ponto p solicitado
    var meuIcone = new GIcon(G_DEFAULT_ICON);
    meuIcone.image = "/img/SUDT.gif";
    marcador = new GMarker(p,meuIcone);

    // Adiciona o marcador ao mapa
    mapaobj.addOverlay(marcador);

    // Exibe uma caixa de informação com o texto informado
    // Note que esse método aceita qualquer string com uma
    // formatação html arbitrária
    marcador.openInfoWindowHtml("<b> " + nomeHotel + "</b><br>" + info);    
  }
  
</script>
</head>
<!-- Chama a função inicializa ao carregar a página html !-->
<body onLoad="inicializa()"  onunload="GUnload()">
  <form name="MyForm" action="" onsubmit="realizaConsulta(); return false;">  
  <!-- Div para a listagem dos endereços !-->  
  <div id="locais"></div>
  <!-- Formulário para o envio de consultas. Note que a função !-->
  <!-- realizaConsulta é invocada no evento onSubmit da tag <form> !-->    
  <%        
        enderecoCompleto = enderecoCompleto &", "& nomeCidade &", "& nomePais      

        Call Fecha_conexao
  %>   
      <input type="hidden" name="consulta" value="<%=enderecoCompleto%>" size = "50" />
      <input type="hidden" size="30" name="nomeHotel" value="<%=nomeHotel%>"/>  
  <!-- Div onde o mapa será renderizado !-->
   <table width="480px" align="center">
    <tr>
    <td>
        <div id="mapa" style="widht: 425; height: 350px"></div>
    </td>
    </tr>
    <table>  
    </form>  
</body>
</html>

Arturt · Setembro 19, 2009

Ola Arturt ..

Abaixo segue um código que uso hoje para meu site...

veja se te ajuda...está totalmente comentado é só mudar as variáveis e inserir a sua Key do google..

Espero ter ajudado.

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



<script src="http://maps.google.com/maps?file=api&v=2&key= MUDE AQUI PARA SUA KEY GERADA NO GOOGLE MAPS" type="text/javascript"></script>

<script type="text/javascript">

// Todas as variáveis utilizadas no sistema

// Referência para a instância de GMap2

var mapaobj;

// Referência para a instância de GClientGeocoder

var geocoder;

// Array para mapear níveis de Zoom com a precisão do resultado

// Sinta-se livre para realizar o mapeamento achar mais conveniente.

// Note que quanto maior o número, maior o nível de zoom.

var nivelZoom = [];

nivelZoom[0] = 2;

nivelZoom[1] = 8;

nivelZoom[2] = 9;

nivelZoom[3] = 10;

nivelZoom[4] = 12;

nivelZoom[5] = 13;

nivelZoom[6] = 14;

nivelZoom[7] = 15;

nivelZoom[8] = 16;

function inicializa()

{

// Cria o objeto principal referenciando a div 'mapa'

mapaobj = new GMap2(document.getElementById("mapa"));

// Centraliza o mapa na coordenada (34, 0) com nível de zoom 3

mapaobj.setCenter(new GLatLng(0, 0), 14);

// Cria o objeto que resolverá as consultas de endereço

geocoder = new GClientGeocoder();

// Adicionamos um controle de zoom e de translação do mapa.

// Uma outra opção seria GSmallMapControl para um controle

// diminuto

mapaobj.addControl(new GLargeMapControl());

// Adiciona as opções de visualização do mapa.

// As opções disponíveis são: normal, híbrido e satélite

mapaobj.addControl(new GMapTypeControl());

//mapaobj.addControl(new GOverviewMapControl());

realizaConsulta(); return false;

//mapaobj.addControl(new GHierarchicalMapTypeControl());

// Iniciamos o mapa com as configuações que escolhemos inicialmente

}

// Função chamada quando o usuário envia a consulta

function realizaConsulta()

{

// Recebe o endereço digitado no campo 'consulta' do form

var endereco = document.forms[0].consulta.value;

// Realiza a consulta. resolverEnderecos é a função callback

// Javascript que será chamada quando o método getLocations do

// objeto geocoder retornar uma resposta.

geocoder.getLocations(endereco, resolverEnderecos);

}

// Callback para tratar o retorno de uma chamada ao método

// getLocations() do objeto geocoder. O parâmetro resposta será

// usado para acessar os dados retornados. resolverEnderecos também faz

// uso da função listarLocais que será explicada adiante.

function resolverEnderecos(resposta)

{

// Retira todos os marcadores existentes no mapa.

mapaobj.clearOverlays();

// Verifica o status da resposta

if (!resposta || resposta.Status.code != G_GEO_SUCCESS)

{

// Caso a resposta seja inválida, exibe o motivo.

alert("Nao foi possivel localizar o endereco solicitado");

// Os códigos de erro são úteis para procurer o motivo

// exato da falha na consulta de endereços na documentação

// do GoogleMaps API

} else {

// Caso o status da resposta seja G_GEO_SUCCESS,

// iremos navegar em todos os resultados retornados,

// que podem ser vários em caso de uma consulta ambígüa

// Extrai o número de resultados retornados. O atributo

// Placemark matém toda a informação de que precisamos

// acerca das localidades encontradas.

var num_resultados = resposta.Placemark.length;

// Obtemos a referência DOM à div na qual os locais encontrados

// serão listados através do Javascript

var alvo = document.getElementById("locais");

// Invoca a função listarLocais, explicada posteriormente

listarLocais(alvo, resposta.Placemark);

// Caso haja múltiplos resultados, informa o fato ao usuário

/*if (num_resultados > 1) {

alert('A sua consulta retornou resultados ambígüos.' +

'\nEscolha a localidade mais adequada à consulta.');

} else {*/

// Caso haja um único resultado,

// Obtém uma referência ao endereço retornado

var local = resposta.Placemark[0];

// Extrai o um objeto GLatLng representando as coordenadas

// do endereço solicitado

var ponto = local.Point.coordinates;

// Extrai a precisão do endereço. Accuracy é um número que

// indica se o endereço retornado corresponde a um país,

// provincial, estado, cidade, bairro, rua, etc. Depende da

// consulta que foi realizada. Com essa informação em mãos,

// podemos decidir qual o nível de zoom mais adequado

var acc = resposta.Placemark[0].AddressDetails.Accuracy;

// Chama a função centralizaMapa passando como argumento

// as coordenadas do ponto (posição 1 para latitude, 0 para

// longitude); O endereço completo do ponto encontrado; a

// precisão do endereço para controlar o nível de zoom

centralizaMapa(ponto[1],ponto[0],resposta.Placemark[0].address, acc);

// }

}

}

// Função lista as localizações encontradas na consulta.

// Os parâmetros são: alvo --> a referência DOM da div que receberá os

// endereços; placemark --> referência a um array de objetos representando as

// localidades encontradas

function listarLocais(alvo, placemark)

{

//Começa a escrita na div informando a quantidade de resultados

// encontrados. O máximo retornado pelo geocoder são seis endereços

//alvo.innerHTML = "<p> A pesquisa retornou " +

//placemark.length + " resultado(s): </p>";

// Loop para escrever informações de cada endereço

for (var i=0; i<placemark.length; ++i)

{

// Obtém a informação da Unidade Federativa, no caso de um

// endereço no Brasil

var uf = placemark.AddressDetails.Country

.AdministrativeArea.AdministrativeAreaName;

// Obtém a informação sobre a precisão do endereço

var acc = placemark.AddressDetails.Accuracy;

// Obtém um ponto GLatLng com as coordenadas da localidade i

var p = placemark.Point.coordinates;

// Obtém o endereço textual completo

var info = placemark.address;

// Começa a escrita de um link para a função centralizaMapa do

// endereço i encontrado

//alvo.innerHTML +="<a href='javascript:centralizaMapa(" + p[1] +

// "," + p[0] + ",\"" + info + "\", " + acc +

// ")'>" + placemark.address +"</a><br />";

}

}

// Função para centralizar o mapa no ponto solicitado

// Parâmetros: x à latitude; y à longitude; info à Um texto que será

// exibido em um quadro informativo que aponta para o endereço;

// acc à a precisão do endereço para utilizar o zoom adequado

function centralizaMapa(x, y, info, acc)

{

var nomeHotel = document.MyForm.nomeHotel.value;

var endereco = document.MyForm.consulta.value;

// Cria um ponto GLatLng

var p = new GLatLng(x, y);

// Obtém o nível de zoom conforme a precisão do endereço

var zoom = nivelZoom[6];

// Define o novo centro do mapa e o seu novo nível de zoom

mapaobj.setCenter(p,zoom);

// Cria um novo marcador que sera exibido no ponto p solicitado

var meuIcone = new GIcon(G_DEFAULT_ICON);

meuIcone.image = "/img/SUDT.gif";

marcador = new GMarker(p,meuIcone);

// Adiciona o marcador ao mapa

mapaobj.addOverlay(marcador);

// Exibe uma caixa de informação com o texto informado

// Note que esse método aceita qualquer string com uma

// formatação html arbitrária

marcador.openInfoWindowHtml("<b> " + nomeHotel + "</b><br>" + info);

}

</script>

</head>



<body onLoad="inicializa()" onunload="GUnload()">

<form name="MyForm" action="" onsubmit="realizaConsulta(); return false;">



<div id="locais"></div>





<%

enderecoCompleto = enderecoCompleto &", "& nomeCidade &", "& nomePais

Call Fecha_conexao

%>

<input type="hidden" name="consulta" value="<%=enderecoCompleto%>" size = "50" />

<input type="hidden" size="30" name="nomeHotel" value="<%=nomeHotel%>"/>



<table width="480px" align="center">

<tr>

<td>

<div id="mapa" style="widht: 425; height: 350px"></div>

</td>

</tr>

<table>

</form>

</body>

</html>

xanburzum · Setembro 19, 2009

dá uma olhada neste tópico , pode te ajudar, e aki tb,mas o code k foi postado tá bem legal, apenas faça suas alterações.

e neste link um bom tutorial

Arturt · Setembro 19, 2009

Vlw muito obrigado e sucessos,

xanburzum · Setembro 20, 2009

beleza, mano...

qualquer coisa posta ae...

Entrar

Arquivado

[Resolvido] Google Map

Recommended Posts

Arturt 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucia_na 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Arturt 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Arturt 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante