Como iniciar uma aplicação do Google Maps com PHP

Escrito por steve mcdonnell Google | Traduzido por yaakov ben levy
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como iniciar uma aplicação do Google Maps com PHP
Use o PHP para enviar coordenadas de mapa ao Google Maps (Jupiterimages/Photos.com/Getty Images)

Para iniciar um aplicativo do Google Maps usando PHP, você precisa criar um script em PHP que envia os dados necessários para a aplicação do Google Maps em um arquivo XML. Então é necessário criar a funcionalidade de aplicação do Google Maps com HTML e Javascript e chamar o script PHP para requisitar os dados necessários para o mapa. Você pode, opcionalmente, encapsular todo o aplicativo Google Maps dentro de um arquivo PHP, ao invés de fazê-lo dentro de um arquivo HTML, para poder incluir alguma lógica / instrução adicional.

Nível de dificuldade:
Desafiante

Outras pessoas estão lendo

Instruções

    Criando um script em PHP

  1. 1

    Crie uma classe em PHP para guardar as coordenadas em latitude e longitude, junto com alguma descrição. Por exemplo, digite:

    <?php class Coordinate { public $latitude, $longitude, $description;

    public function __construct($lat, $lng, $description) { $this->latitude = $lat; $this->longitude = $lng; $this->description = $description; } }

  2. 2

    Crie uma classe em PHP para guardar uma sequência de coordenadas associadas a um nome e descrição. Adicione uma função à classe para criar uma saída de dados em XML. Por exemplo, digite:

    class Coordinates { protected $coordinates;

    public function __construct() { $this->coordinates = array(); }

    public function add($name, $description, $lat, $lng) { $this->coordinates[$name] = new Coordinate($lat, $lng, $description); }

    public function output_xml() { $xml = new DOMDocument("1.0"); $node = $xml->createElement("markers"); $root = $xml->appendChild($node);

    foreach ($this->coordinates as $key=>$value) { $node = $xml->createElement("marker"); $newnode = $root->appendChild($node); $newnode->setAttribute("city", $key); $newnode->setAttribute("lat", $value->latitude); $newnode->setAttribute("lng", $value->longitude); $newnode->setAttribute("desc", $value->description); } echo $xml->saveXML(); } }

  3. 3

    Crie o programa principal em PHP para guardar a latitude e a longitude de cidades selecionadas e enviar uma versão dos dados em XML quando o programa for executado. Por exemplo, digite:

    $cities = new Coordinates(); $cities->add("Nassau", "Bahamas", "25.08333", "-77.3333"); $cities->add("Cairo", "Egypt", "36.01667", "31.2333"); $cities->add("Paris", "France", "48.83333", "2.33333"); $cities->add("Beijing", "China", "39.91667", "116.3333"); $cities->add("Santiago", "Chile", "-33.40000", "-70.66667");

    $cities->output_xml(); ?>

    Crie uma aplicação Google Maps

  1. 1

    Crie o novo arquivo em PHP no qual você deseja incluir a lógica PHP com o programa original. Crie o cabeçalho HTML para sua página da web. Por exemplo:

    <?php $custom_name = "Steve"; ?> <!DOCTYPE html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><?php echo $custom_name; ?>'s Mapa de cidades internacionais</title>

  2. 2

    Inclua a biblioteca externa API Javascript do Google Maps. Por exemplo:

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

  3. 3

    Crie o programa principal em JavaScript. Inicie o script criando uma variável que guardará o mapa. Por exemplo:

    <script type="text/javascript"> var map;

  4. 4

    Crie uma função para mostrar o mapa na tela. Comece definindo as opções para o mapa. Crie o mapa e a variável para a janela pop-up informativa. Por exemplo:

    function create() { var newYork = new google.maps.LatLng(40.69847032728747, -73.9514422416687); var mapOptions = {zoom:13, center:newYork, mapTypeId:"roadmap"}; map = new google.maps.Map(document.getElementById("map"), mapOptions); infoWindow = new google.maps.InfoWindow;

  5. 5

    Chame uma função que irá, de forma assíncrona, colher dados do arquivo PHP. Crie uma função de callback que irá processar os dados e planejar os marcadores no mapa. Por exemplo:

    downloadPHPData("coordinates.php", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i=0; i<markers.length; i++) { var city = markers[i].getAttribute("city"); var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = city + ", " + markers[i].getAttribute("desc"); var marker = new google.maps.Marker( {map:map, position:point, title:city} ); bindInfoWindow(marker, map, infoWindow, html); } });

    }

  6. 6

    Crie a função que irá, de forma assíncrona, colher os dados e repassá-los para a função callback. Por exemplo:

    function downloadPHPData(url, callback) { var request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } };

    request.open('GET', url, true); request.send(null); }

    function doNothing() { }

  7. 7

    Crie uma função que fará aparecer uma janela pop-up com as informações do marcador. Por exemplo:

    function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, "click", function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); }

  8. 8

    Feche a tag do script, feche a tag do cabeçalho (head tag) e crie o código principal HTML para estabelecer o "div" para o mapa e rodar a função "create" (criar) quando a página carregar. Por exemplo:

    </script> </head> <body onload="create()"> <div id="map" style="width:800px; height:800px"></div> </body> </html>

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível