Adicione O Google Maps Ao Seu Website
Você já ouviu falar na API do Google Maps?
É… ele é um tipo de “library” usado para criar mapas (que são gerados diretamente do google em seu site).
A API do Google Maps permite usar JavaScript para incorporar o Google Maps em sua página. Ela também fornece diversos utilitários para que você possa manipular mapas que podem ser customizados e usados em seu site!
Para que você não fique perdido ao elaborar o Projeto, pedimos a gentileza de acompanhar a matéria do início ao fim e seguir os passos que vamos descrever para elaborar sua solução!
A “chave” de acesso é gerada individualmente (específico para seu web site), caso haja apenas a cópia do sistema sem os testes, apresentará erro em tela.
Antes De Criar Um Script
Após logar no GMail, com a tela do navegador aberta, acesse o endereço da API do Google Maps.
OBS.: Não se esqueça de selecionar a opção informando que concorda com os termos e disponibilizar seu endereço web.
Você será direcionado a uma outra página onde deverá conter:
- Sua Key (chave de acesso);
- Javascript Maps API Exemple;
- Maps API for Flash Exemple;
- HTTP Service Exemple.
Não sabemos qual será sua necessidade; porém, desta página você poderá utilizar pelo menos a chave de acesso (que é de uso obrigatório – para que o sistema funcione).
Após salvar em local seguro sua chave de uso do sistema, leia com calma as páginas a seguir para conhecer mais sobre os recursos do Google Maps:
Trabalhando Com O Google Maps
A característica que sem dúvida chama mais atenção no Google Maps é a sua interatividade!
Nossos usuários poderão clicar várias vezes no mapa para irem a locais diferentes do mundo, dar zoom ou escolher o tipo do mapa sem necessidade de recarregar a página!
Claro, se você vai usar para fins pessoais ou comerciais, o ideal é aproveitar ao máximo seus recursos (dentro de suas necessidades).
Não vamos aprofundar nesta matéria o que podemos fazer com o AJAX (pois na maioria das vezes, você vai usar recursos dele). Vamos lhe passar algumas dicas e informações sobre os parâmetros de forma que você possa elaborar seu próprio projeto, independente de seu tamanho.
Antes de falar dos parâmetros e dar um exemplo mais prático, vamos analisar nosso código de exemplo?
Antes de qualquer coisa, vamos configurar a base de dados!
Crie uma base de dados com o nome “googlemaps”, em seguida, crie a tabela e campos com o código a seguir:
----- CRIA A TABELA LOCATIONS -----
CREATE TABLE `locations` (
`location_id` int(10) NOT NULL auto_increment,
`name` text NOT NULL,
`lat` double NOT NULL default '0',
`lng` double NOT NULL default '0',
PRIMARY KEY (`location_id`)
) AUTO_INCREMENT=3 ;
INSERT INTO `locations` VALUES (1, 'Londres', 51.49945, -0.11332);
INSERT INTO `locations` VALUES (2, 'Manchester', 53.481508, -2.241211);
Após criar a tabela, efetue as configurações de conexão ao Servidor no script a seguir:
read.php:
<?php
// Configura a base de dados
$host = 'localhost'; // Servidor
$user = 'root'; // Usuário do DB
$pass = ''; // Senha do DB
$dbname = 'googlemaps'; // Base de dados
if (!$db = mysql_connect($host, $user, $pass)) {
echo 'Conexão ao MySQL não realizada';
exit;
}
if (!mysql_select_db($dbname, $db)) {
echo 'Não foi possível acessar a base de dados';
exit;
}
// Date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
// always modified
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
// HTTP/1.1
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// HTTP/1.0
header("Pragma: no-cache");
//XML Header
header("content-type:text/xml");
// Seleciona os dados da tabela Locations
$query = "SELECT location_id, name, lat, lng FROM locations WHERE 1";
$query = mysql_query($query);
echo "<locations>";
while ($row=mysql_fetch_assoc($query)){
echo '<location id="'.$row['location_id'].'" name="'.$row['name'].'" lat="'.$row['lat'].'" lng="'.$row['lng'].'"/>';
}
echo "</locations>";
?>
Bem… após configurar os dados de acesso à base de dados, precisaremos efetuar algumas configurações no script para que suas informações sejam apresentadas em tela.
Antes de qualquer coisa, não esqueça de estar com a KEY do Google Maps em mãos.
index.php:
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>.:: WebMaster.PT :: Usando o PHP + Ajax ::.</title>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=ADICIONE_SUA_CHAVE_AQUI" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function onLoad() {
map = new GMap(document.getElementById("div_map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(54, -3), 5);
getMarkers();
GEvent.addListener(map, "click", function(overlay, point) {
if (overlay){ // marker clicado
overlay.openInfoWindowHtml(overlay.infowindow); // open InfoWindow
} else if (point) { // background clicado
}
});
}
function getMarkers(){
var urlstr="read.php";
var request = GXmlHttp.create();
request.open('GET', urlstr , true); // Solicita o XML pelo PHP com o AJAX
request.onreadystatechange = function () {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
locations = xmlDoc.documentElement.getElementsByTagName("location");
markers = [];
if (locations.length){
for (var i = 0; i < locations.length; i++) { // cycle thru locations
markers[i] = new GMarker(new GLatLng(locations[i].getAttribute("lat"),locations[i].getAttribute("lng")));
// Adiciona os atributos para o marker
// Quando clicado aparece um evento mostrando os dados da propriedade.
markers[i].infowindow = "Esta cidade é "+locations[i].getAttribute("name");
// Chama o markers[] (array)
markers[i].markerindex = i;
// O Ajax chama os dados da base de dados para atualizar as informações no location_id
markers[i].db_id = locations[i].getAttribute("location_id");
map.addOverlay(markers[i]);
}
}
}
}
request.send(null);
}
//]]>
</script>
</head>
<body onload="onLoad()">
<div id="div_map" style="width: 500px; height: 300px"></div>
</body>
</html>
Após rodar em sua página, veja como o script ficará:
Prático, não?
Parâmetros
As Páginas que contém a API do Google Maps devem estar no formato a seguir:
- http://maps.google.com/staticmap?parameters
Determinados parâmetros são obrigatórios e outros, opcionais. Assim como é padrão em solicitações HTTP, todos os parâmetros são separados usando o caractere “e” comercial (&).
A lista de parâmetros e os valores possíveis se encontram enumerados abaixo:
- center (obrigatório – caso não haja marcadores): Define o centro do mapa, equidistante em relação a todas as suas extremidades. Esse parâmetro usa um par separado por vírgula {latitude,longitude} (por exemplo, “40,714728,-73,998672″) identificando uma localização única na face terrestre.
- format (opcional): Define o formato da imagem resultante.
- frame (opcional): Especifica que a imagem resultante deve ser enquadrada com uma borda de cor azul.
- hl (opcional): Define o idioma a ser usado para a exibição de rótulos nos blocos do mapa.
- key (obrigatório): Identifica a chave de API do Maps em relação ao domínio em que ocorre a solicitação de URL.
- maptype (opcional): Define o tipo de mapa a ser criado.
- markers (opcional): Define um ou mais marcadores a serem anexados à imagem em localizações especificadas.
- path (opcional): Define um caminho único de dois ou mais pontos conectados para se sobreporem à imagem em locais específicos.
- sensor (obrigatório): Especifica se o aplicativo que está solicitando o mapa estático está usando um sensor para determinar a localização do usuário. OBS.: Agora, esse parâmetro é exigido para todas as solicitações de mapas estáticos.
- size (obrigatório): Define as dimensões retangulares da imagem do mapa.
- span (opcional): Define uma janela de visualização mínima para a imagem do mapa.
- zoom (obrigatório caso não haja marcadores): Define o nível de zoom do mapa, que determina o nível de ampliação do mapa.
É a primeira vez que você trabalha com este tipo de solução?
Como você pode ver, nosso script define 2 locais e a partir deles você consegue chegar a outros lugares!
Analise detalhadamente nosso Projeto e procure junto ao Google Maps instruções de como modificá-lo!
Dentro em breve, com certeza você vai estar criando soluções infinitamente melhores que essa.
Espero que esta matéria lhe ajude em algo…