Colocar google maps em um site lista telefonica

Cyberlacs · Janeiro 10, 2014

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

Maykel-ctba · Janeiro 10, 2014

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 · Janeiro 15, 2014

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

Fico no aguardo

Williams Duarte · Janeiro 16, 2014

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 · Janeiro 16, 2014

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 · Janeiro 16, 2014

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 · Janeiro 16, 2014

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:

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

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 · Janeiro 16, 2014

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>

<!-- Esqueci de onload="initialize()"  -->

<body onload="initialize()">

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

</body>
</html>

Cyberlacs · Janeiro 16, 2014

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 · Janeiro 16, 2014

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

entre aspas

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

Cyberlacs · Janeiro 16, 2014

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 · Janeiro 17, 2014

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 ;)

Arquivado

Colocar google maps em um site lista telefonica

Recommended Posts

Cyberlacs 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maykel-ctba 233

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cyberlacs 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Williams Duarte 431

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cyberlacs 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webdevbr 35

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cyberlacs 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Williams Duarte 431

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cyberlacs 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Williams Duarte 431

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cyberlacs 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Williams Duarte 431

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Fóruns

Tempo Real

Informação importante