Publicado em 10 de jan.

Colocar google maps em um site lista telefonica

Amigos estou querendo colocar o google maps nos detalhes de cada registro.

Explicando melhor desenvolvi um site em PHP e este site é uma lista telefônica e quando o usuario pesquisa ele chega no cadastro desejado em mais detalhes e é neste momento que quero colocar o google maps.

Percebam que cada registro tem um endereço diferente com localizações diferentes.

Pergunto como faço para passar o endereço na pagina de detalhes e joga-la no google maps

<div id="corpo_centralizado575">

	<fieldset class="dados_empresa_deseja_alterar">
 <legend>Visualizando Informações da Empresa</legend>
 <?php
 $getListaComercial = "SELECT * FROM liscom WHERE phoner LIKE '$telefone'";
 $getListaComecialQuery = mysql_query($getListaComercial) or die(mysql_error());

 while($BuscaEmpresaLinha = mysql_fetch_array($getListaComecialQuery)){

 $empresa = $BuscaEmpresaLinha['name'];
 $ddd = $BuscaEmpresaLinha['ddd'];
 $telefone = $BuscaEmpresaLinha['phoner'];
 $endereco = $BuscaEmpresaLinha['addressf'];
 $numero = $BuscaEmpresaLinha['num_endf'];
 $bairro = $BuscaEmpresaLinha['bairrof'];
 $cidade = $BuscaEmpresaLinha['cityf'];
 $cep = $BuscaEmpresaLinha['cepf'];
 $categoria = $BuscaEmpresaLinha['smerc'];

 echo "<div class='informacao'>";
 echo "<h3>$empresa</h3>";
 echo "<p style='color:#006621;'>Telefone: $ddd $telefone</p>";
 echo "<p>Endereço: $endereco $numero - Bairro: $bairro</p>";
 echo "<p>Cidade: $cidade Cep: $cep</p>";
 echo "<p style='color:#008EB7;'>Categoria: <a href='resultado.php?descricao=$categoria&cidade=$cidade' style='color:#008EB7;'>$categoria</a></p>";
 echo "</div>";
 }
 ?>
	</fieldset>

 É AQUI QUE QUERO QUE O GOOGLE MAPS IMPRIMA A LOCALIZAÇÃO

</div>

Fico no aguardo obrigado

Discussão (11)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Maykel-ctba· 10 de jan.

Com o endereço, primeiro você terá que descobrir qual a latitude/longitude do endereço.

Depois disso, você pode usar maplace.js pra exibir o mapa e customizar a aparência dele ;-)

Cyberlacs· 15 de jan.

Mas como pego esta latitude e longitude em php, você pode me informar Maykel-ctba ?

Fico no aguardo

Williams Duarte· 16 de jan.

Existe uma api para isso, e não precisa pegar logitude e latitude

Você precisa de uma chave, esta chave você pega em sua conta no google, da uma pesquisada

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=NUMERO_DA_CHAVE&sensor=true"></script>
 

<script type="text/javascript">
var uzomm = 16;
var query = 'Av. Alfredo Ignácio Nogueira Penido 335 S 150, Parque Residencial Aquarius, São José dos Campos - SP';
</script>

/ Mostra Mapa - BEGIN /

var geocoder;
var map;

function initialize() {
 var zomm = uzomm;
 geocoder = new google.maps.Geocoder();
 var myOptions = {
 zoom: zomm,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 codeAddress();
}

function codeAddress() {
 var address = query;
 geocoder.geocode({
 'address': address
 }, function (results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 map.setCenter(results[0].geometry.location);
 var marker = new google.maps.Marker({
 map: map,
 position: results[0].geometry.location
 });
 }
 });
}

e div onde quer que apareça

<div class="mapa"><!--MAPA - BEGIN -->
 <div id="map_canvas"></div>
</div><!--MAPA - END -->

Espero que lhe ajude!

Cyberlacs· 16 de jan.

Amigo Williams Duarte coloquei o seu código em um novo arquivo php com a minha chave api e não imprimiu nada veja o que estou fazendo de errado, postei o arquivo inteiro que fiz

Obrigado

<!DOCTYPE HTML>

<html lang="pt-br">
<head>
<title>Mapa</title>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC6TN44UtWu6tTDlRwZGCPLb97zhtHQcJ0&sensor=true"></script>

<script type="text/javascript">
var uzomm = 16;
var query = 'Av. Alfredo Ignácio Nogueira Penido 335 S 150, Parque Residencial Aquarius, São José dos Campos - SP';

/ Mostra Mapa - BEGIN /

var geocoder;
var map;

function initialize() {
 var zomm = uzomm;
 geocoder = new google.maps.Geocoder();
 var myOptions = {
 zoom: zomm,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 codeAddress();
}

function codeAddress() {
 var address = query;
 geocoder.geocode({
 'address': address
 }, function (results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 map.setCenter(results[0].geometry.location);
 var marker = new google.maps.Marker({
 map: map,
 position: results[0].geometry.location
 });
 }
 });
}

</script>

</head>
<body>

<div class="mapa"><!--MAPA - BEGIN -->
 <div style="height:400px; width:400px; background:#999;" id="map_canvas">

 </div>
</div><!--MAPA - END -->

</body>
</html>

webdevbr· 16 de jan.

Parque residencial aquarius? ta mais para Centro comercial de alto lucro e_e'

Cyber, cheque o site de desenvolvedores da google e leia sobrea seção para WebSites / Companhias comercias, A google possui toda uma licensiação e restrições quanto ao uso da API.

Cyberlacs· 16 de jan.

Web bom dia este endereço foi o amigo Williams que passou eu peguei o exemplo dele, no meu caso é uma lista telefonica comercial

O mapa tem que ser dinâmico e depende do que o usuário pesquisou.

>
Williams Duarte passou:

Olha o que eu quero fazer

Exemplo é isso::::
http://www.listamais.com.br/telefone/1836228860/a-l-l-isidoro-veiculos-me-em-aracatuba.aspx

Para isso qual seria a licensa ???????

Fico no aguardo

Williams Duarte· 16 de jan.

Corrigido e aqui funcionou, só troque a chave

<!DOCTYPE HTML>

<html lang="pt-br">
<head>
<title>Mapa</title>

	<style>
	#map_canvas{

	}

	.mapa #map_canvas{

 height:600px;
	}
	</style>
	<script type="text/javascript">
	var uzomm = 16;
	var query = 'Rua São Luiz 31, Vila Nova, Cubatão - SP';

	/* Mostra Mapa - BEGIN */
	var geocoder;
	var map;

	function initialize() {
 var zomm = uzomm;
 geocoder = new google.maps.Geocoder();
 var myOptions = {
 zoom: zomm,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 codeAddress();
	}

	function codeAddress() {
 var address = query;
 geocoder.geocode({
 'address': address
 }, function (results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 map.setCenter(results[0].geometry.location);
 var marker = new google.maps.Marker({
 map: map,
 position: results[0].geometry.location
 });
 }
 });
	}

	</script>

	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=CHAVE_API&sensor=true"></script>

</head>

<body onload="initialize()">

	<div class="mapa">
 <!--MAPA - BEGIN -->
 <div id="map_canvas"></div>
	</div><!--MAPA - END -->

</body>
</html>

Cyberlacs· 16 de jan.

Willams Duarte funcionou perfeitamente mas esta acontecendo algo estranho que não estou conseguindo resolver

O mapa será dinâmico então pego no banco o endereço assim

	$telefone = $_REQUEST['telefone'];

	$getListaComercial = "SELECT * FROM listatel WHERE telefone LIKE '$telefone'";
	$getListaComecialQuery = mysql_query($getListaComercial) or die(mysql_error());

	while($BuscaEmpresaLinha = mysql_fetch_array($getListaComecialQuery)){
 $empresa = $BuscaEmpresaLinha['nome'];
 $ddd = $BuscaEmpresaLinha['ddd'];
 $telefone = $BuscaEmpresaLinha['telefone'];
 $endereco = $BuscaEmpresaLinha['endereco'];
 $numero = $BuscaEmpresaLinha['numero'];
 $bairro = $BuscaEmpresaLinha['bairro'];
 $cidade = $BuscaEmpresaLinha['cidade'];
 $cep = $BuscaEmpresaLinha['cep'];
 $categoria = $BuscaEmpresaLinha['categoria'];
 $logradouro = $BuscaEmpresaLinha['logradouro'];
 $estado = $BuscaEmpresaLinha['estado'];
	}

	$endereco_completo = "$endereco $numero,$cidade,$estado";

Ai pego o endereço completo em PHP

$endereco_completo = "$endereco $numero,$cidade,$estado";

E passo para o JavaScript mas não funciona

var query = <?=$endereco_completo ?>;

Mas se eu digitar o endereço ai funciona

var query = 'Rua São Luiz 31, Vila Nova, Cubatão - SP';

Como faço para fazer o javascript pegar o endereço ??????

Fico no aguardo

Williams Duarte· 16 de jan.

$endereco_completo = "$endereco, $numero, $cidade - $estado";

entre aspas

var query = '<?=$endereco_completo ?>';

Cyberlacs· 16 de jan.

Williams Duarte muito obrigado e você me ajudou muito, funcionou perfeitamente.

AH MAIS UMA PERGUNTA COMO FAÇO PARA BLOQUEAR O MAPA PARA QUE O SCROLL DO MOUSE NÃO DÊ O ZOOM

E dei 1 ponto positivo em reputação.

Valeu mesmo :)

Williams Duarte· 17 de jan.

De uma olhada na API, faz muito tempo que desenvolvemos pode ser que mudaram algumas coisinhas sobre isso!

Ou posta lá para a galera de fórum de javascript ;)