Adicione O Google Maps Ao Seu Website

Olá! É a primeira vez que visitas o nosso blog? Subscreve o nosso RSS Feed para receberes notificações de novos artigos. Ou segue-nos no Twitter.

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.