Cómo empezar una aplicación de Google Maps con PHP

Escrito por steve mcdonnell Google | Traducido por enrique pereira vivas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo empezar una aplicación de Google Maps con PHP
Utiliza PHP para enviar las coordenadas de un mapa de Google Maps. (Jupiterimages/Photos.com/Getty Images)

Para iniciar una aplicación de Google Maps con PHP, necesitas crear un script PHP que entregue la información que necesita la aplicación Google Maps en un formato XML. A continuación, deberás crear la funcionalidad de la aplicación Google Maps con HTML y Javascript y llamar al script PHP para recuperar los datos necesarios para el mapa. Si lo deseas, puedes encapsular toda la aplicación Google Maps dentro de un archivo PHP, en lugar de en un archivo HTML, para incluir una lógica adicional.

Nivel de dificultad:
Difícil

Otras personas están leyendo

Instrucciones

    Crear script PHP

  1. 1

    Crea una clase PHP para almacenar coordenadas de latitud y longitud y una descripción. Por ejemplo, escribe:

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

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

  2. 2

    Crea una clase PHP para almacenar un conjunto de coordenadas asociados a un nombre de identificación y descripción. Agrega una función a la clase para la salida de una versión XML de los datos. Por ejemplo, escribe:

    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

    Crea el programa principal de PHP para almacenar la latitud y longitud de las ciudades seleccionadas y una salida de una versión XML de los datos cuando se ejecute el programa. Por ejemplo, escribe:

    $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(); ?>

    Crear aplicación Google Maps

  1. 1

    Crea un nuevo archivo PHP si deseas incluir lógica de PHP con el programa principal. Crea los encabezados de HTML para la página web. Por ejemplo, escribe:

    <?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 Map of International Cities</title>

  2. 2

    Incluye la biblioteca Javascript API externa de Google Maps . Por ejemplo, escribe:

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

  3. 3

    Crea el principal programa Javascript. Comienza la secuencia de comandos mediante la creación de una variable para almacenar el mapa. Por ejemplo, escribe:

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

  4. 4

    Crea una función para visualizar el mapa en la pantalla. Comienza por definir las opciones para el mapa. Crea el mapa y crea una variable para la ventana de información emergente. Por ejemplo, escribe:

    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

    Llama a una función que recupere de forma asíncrona los datos desde el archivo PHP. Crea la función de devolución de llamada que procesará los datos y graficará los marcadores en el mapa. Por ejemplo, escribe:

    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

    Crea la función para recuperar los datos de forma asíncrona y pasarla a la función de devolución de llamada. Por ejemplo, escribe:

    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

    Crea la función para que emerja la ventana de información cuando se hace clic en un marcador. Por ejemplo, escribe:

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

  8. 8

    Cierra la etiqueta script, cierra la etiqueta de la cabeza y crea el código HTML principal para establecer el "div" para el mapa y poner en marcha la función "crear" cuando se cargue la página. Por ejemplo, escribe:

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

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles