Tierra con chincheta transparentePhoogle es una fantástica clase para manejar la API de GoogleMaps y poder generar en unas cuantas lineas mapas simples y funcionales. El único problema podría ser la limitación que tiene a la hora de desarrollar nuevas operaciones.

Mi problema era que quería que, al pinchar en un enlace apareciera el globo de texto asociado mostrando la ubicación. Esta funcion la habia visto con la clase GoogleMapAPI.class.php y pensaba que Phoogle tambien lo podria hacer pero, vistos los ejemplos me di cuenta que no, asi que me puse manos a la obra para aplicar alguna pequeña mejora y poder realizarlo de una manera simple.

Para hacerlo he realizado unas pequeñas modificaciones.
En el archivo que podéis descargar de aquí, entramos y modificamos las siguientes lineas:

Despues de la linea 241, donde aparece:

PLAIN TEXT
PHP:
  1. echo "    <script type=\"text/javascript\">\n";

insertamos esto:

PLAIN TEXT
PHP:
  1. echo "var markers = [];\n";
  2.             echo 'function click_sidebar(idx, contenido) {' . "\n";
  3.             echo '  markers[idx].openInfoWindowHtml(contenido);' . "\n";
  4.             echo '}' . "\n";

En la que ahora será la linea 278, después de:

PLAIN TEXT
PHP:
  1. map.addOverlay(marker".$g.")\n

insertamos:

PLAIN TEXT
PHP:
  1. markers[".$g."] = marker".$g.";\n

Con esta modificacion podremos utilizar una nueva funcion javascript llamada click_sidebar(). A esta función le pasaremos 2 parámetros, el primero es el numero de "dirección" al que queremos llamar (la primera es 0, la segunda 1….). El segundo parámetro será el contenido del globo de información.
Ejemplo: <a href="#" onclick="javascript:click_sidebar('0', 'primer punto del mapa');return false;">texto del link</a>.

Lo mejor para despejar dudas será un ejemplo practico amplio..
Para el ejemplo usaremos 2 archivos que estarán en la misma parpeta dentro del servidor:

Archivo phogle.php (version Phoogle Maps 2.0) CON LA MODIFICACIÓN REALIZADA! más la función de obtención de APIKEY automatica:

PLAIN TEXT
PHP:
  1. <?php
  2.  
  3. /**
  4. * Phoogle Maps 2.0 | Uses Google Maps API to create customizable maps
  5. * that can be embedded on your website
  6. *    Copyright (C) 2005  Justin Johnson
  7. *
  8. *    This program is free software; you can redistribute it and/or modify
  9. *    it under the terms of the GNU General Public License as published by
  10. *    the Free Software Foundation; either version 2 of the License, or
  11. *    (at your option) any later version.
  12. *
  13. *    This program is distributed in the hope that it will be useful,
  14. *    but WITHOUT ANY WARRANTY; without even the implied warranty of
  15. *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  16. *    GNU General Public License for more details.
  17. *
  18. *    You should have received a copy of the GNU General Public License
  19. *    along with this program; if not, write to the Free Software
  20. *    Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
  21. *
  22. *
  23. * Phoogle Maps 2.0
  24. * Uses Google Maps Mapping API to create customizable
  25. * Google Maps that can be embedded on your website
  26. *
  27. * @class        Phoogle Maps 2.0
  28. * @author       Justin Johnson <justinjohnson@system7designs.com>
  29. * @copyright    2005 system7designs
  30. */
  31.  
  32.  
  33.  
  34.  
  35. class PhoogleMap{
  36. /**
  37. * validPoints : array
  38. * Holds addresses and HTML Messages for points that are valid (ie: have longitude and latitutde)
  39. */
  40.     var $validPoints = array();
  41. /**
  42. * invalidPoints : array
  43. * Holds addresses and HTML Messages for points that are invalid (ie: don't have longitude and latitutde)
  44. */
  45.     var $invalidPoints = array();
  46. /**
  47. * mapWidth
  48. * width of the Google Map, in pixels
  49. */
  50.     var $mapWidth = 300;
  51. /**
  52. * mapHeight
  53. * height of the Google Map, in pixels
  54. */
  55.     var $mapHeight = 300;
  56.  
  57. /**
  58. * apiKey
  59. * Google API Key
  60. */
  61.     var $apiKey = "";
  62.  
  63. /**
  64. * showControl
  65. * True/False whether to show map controls or not
  66. */
  67.     var $showControl = true;
  68.    
  69. /**
  70. * showType
  71. * True/False whether to show map type controls or not
  72. */
  73.     var $showType = true;
  74. /**
  75. * controlType
  76. * string: can be ’small' or 'large'
  77. * display’s either the large or the small controls on the map, small by default
  78. */
  79.  
  80.     var $controlType = ’small';
  81.    
  82. /**
  83. * zoomLevel
  84. * int: 0-17
  85. * set’s the initial zoom level of the map
  86. */
  87.  
  88.     var $zoomLevel = 4;
  89.  
  90.  
  91.  
  92.  
  93. /**
  94. * @function     addGeoPoint
  95. * @description  Add’s an address to be displayed on the Google Map using latitude/longitude
  96. *               early version of this function, considered experimental
  97. */
  98.  
  99. function addGeoPoint($lat,$long,$infoHTML){
  100.     $pointer = count($this->validPoints);
  101.         $this->validPoints[$pointer]['lat'] = $lat;
  102.         $this->validPoints[$pointer]['long'] = $long;
  103.         $this->validPoints[$pointer]['htmlMessage'] = $infoHTML;
  104.     }
  105.    
  106. /**
  107. * @function     centerMap
  108. * @description  center’s Google Map on a specific point
  109. *               (thus eliminating the need for two different show methods from version 1.0)
  110. */
  111.  
  112. function centerMap($lat,$long){
  113.     $this->centerMap = "map.centerAndZoom(new GPoint(".$long.",".$lat."), ".$this->zoomLevel.");\n";
  114. }
  115.    
  116.    
  117. /**
  118. * @function     addAddress
  119. * @param        $address:string
  120. * @returns      Boolean True:False (True if address has long/lat, false if it doesn't)
  121. * @description  Add’s an address to be displayed on the Google Map
  122. *               (thus eliminating the need for two different show methods from version 1.0)
  123. */
  124.     function addAddress($address,$htmlMessage=null){
  125.      if (!is_string($address)){
  126.         die("All Addresses must be passed as a string");
  127.       }
  128.         $apiURL = "http://maps.google.com/maps/geo?&output=xml&key=".$this->apiKey."&q=";
  129.         $addressData = file_get_contents($apiURL.urlencode($address));
  130.        
  131.         $results = $this->xml2array(utf8_encode($addressData));
  132.         if (empty($results['kml'][Response]['Placemark']['Point']['coordinates'])){
  133.             $pointer = count($this->invalidPoints);
  134.             $this->invalidPoints[$pointer]['lat']= $results['kml'][Response]['Placemark']['Point']['coordinates'][0];
  135.             $this->invalidPoints[$pointer]['long']= $results['kml'][Response]['Placemark']['Point']['coordinates'][1];
  136.             $this->invalidPoints[$pointer]['passedAddress'] = $address;
  137.             $this->invalidPoints[$pointer]['htmlMessage'] = $htmlMessage;
  138.           }else{
  139.             $pointer = count($this->validPoints);
  140.             $this->validPoints[$pointer]['lat']= $results['kml'][Response]['Placemark']['Point']['coordinates'];
  141.             $this->validPoints[$pointer]['long']= $results['kml'][Response]['Placemark']['Point']['coordinates'];
  142.             $this->validPoints[$pointer]['passedAddress'] = $address;
  143.             $this->validPoints[$pointer]['htmlMessage'] = $htmlMessage;
  144.         }
  145.    
  146.    
  147.     }
  148. /**
  149. * @function     showValidPoints
  150. * @param        $displayType:string
  151. * @param        $css_id:string
  152. * @returns      nothing
  153. * @description  Displays either a table or a list of the address points that are valid.
  154. *               Mainly used for debugging but could be useful for showing a list of addresses
  155. *               on the map
  156. */
  157.     function showValidPoints($displayType,$css_id){
  158.     $total = count($this->validPoints);
  159.       if ($displayType == "table"){
  160.         echo "<table id=\"".$css_id."\">\n<tr>\n\t<td>Address</td>\n</tr>\n";
  161.         for ($t=0; $t<$total; $t++){
  162.             echo"<tr>\n\t<td>".$this->validPoints[$t]['passedAddress']."</td>\n</tr>\n";
  163.         }
  164.         echo "</table>\n";
  165.         }
  166.       if ($displayType == "list"){
  167.         echo "<ul id=\"".$css_id."\">\n";
  168.       for ($lst=0; $lst<$total; $lst++){
  169.         echo "<li>".$this->validPoints[$lst]['passedAddress']."</li>\n";
  170.         }
  171.         echo "</ul>\n";
  172.        }
  173.     }
  174. /**
  175. * @function     showInvalidPoints
  176. * @param        $displayType:string
  177. * @param        $css_id:string
  178. * @returns      nothing
  179. * @description  Displays either a table or a list of the address points that are invalid.
  180. *               Mainly used for debugging shows only the points that are NOT on the map
  181. */
  182.     function showInvalidPoints($displayType,$css_id){
  183.       $total = count($this->invalidPoints);
  184.       if ($displayType == "table"){
  185.         echo "<table id=\"".$css_id."\">\n<tr>\n\t<td>Address</td>\n</tr>\n";
  186.         for ($t=0; $t<$total; $t++){
  187.             echo"<tr>\n\t<td>".$this->invalidPoints[$t]['passedAddress']."</td>\n</tr>\n";
  188.         }
  189.         echo "</table>\n";
  190.         }
  191.       if ($displayType == "list"){
  192.         echo "<ul id=\"".$css_id."\">\n";
  193.       for ($lst=0; $lst<$total; $lst++){
  194.         echo "<li>".$this->invalidPoints[$lst]['passedAddress']."</li>\n";
  195.         }
  196.         echo "</ul>\n";
  197.        }
  198.     }
  199. /**
  200. * @function     setWidth
  201. * @param        $width:int
  202. * @returns      nothing
  203. * @description  Sets the width of the map to be displayed
  204. */
  205.     function setWidth($width){
  206.         $this->mapWidth = $width;
  207.     }
  208. /**
  209. * @function     setHeight
  210. * @param        $height:int
  211. * @returns      nothing
  212. * @description  Sets the height of the map to be displayed
  213. */
  214.     function setHeight($height){
  215.         $this->mapHeight = $height;
  216.     }
  217. /**
  218. * @function     setAPIkey
  219. * @param        $key:string
  220. * @returns      nothing
  221. * @description  Stores the API Key acquired from Google
  222. */
  223.     function setAPIkey($key){
  224.         $this->apiKey = $key;
  225.     }
  226. /**
  227. * @function     printGoogleJS
  228. * @returns      nothing
  229. * @description  Adds the necessary Javascript for the Google Map to function
  230. *               should be called in between the html <head></head> tags
  231. */
  232.     function printGoogleJS(){
  233.         echo "\n<script src=\"http://maps.google.com/maps?file=api&v=2&key=".$this->apiKey."\" type=\"text/javascript\"></script>\n";
  234.     }
  235. /**
  236. * @function     showMap
  237. * @description  Displays the Google Map on the page
  238. */
  239.     function showMap(){
  240.         echo "\n<div id=\"map\" style=\"width: ".$this->mapWidth."px; height: ".$this->mapHeight."px\">\n</div>\n";
  241.         echo "    <script type=\"text/javascript\">\n";
  242.             echo "var markers = [];\n";
  243.             echo 'function click_sidebar(idx, contenido) {' . "\n";
  244.             echo '  markers[idx].openInfoWindowHtml(contenido);' . "\n";
  245.             echo '}' . "\n";
  246.         echo "function showmap(){
  247.                 //<![CDATA[\n
  248.             if (GBrowserIsCompatible()) {\n
  249.           var map = new GMap(document.getElementById(\"map\"));\n";
  250.           if (empty($this->centerMap)){
  251.              echo "map.centerAndZoom(new GPoint(".$this->validPoints[0]['long'].",".$this->validPoints[0]['lat']."), ".$this->zoomLevel.");\n";
  252.              }else{
  253.                echo $this->centerMap;
  254.                }
  255.             echo "}\n
  256.             var icon = new GIcon();
  257.             icon.image = \"http://labs.google.com/ridefinder/images/mm_20_red.png\";
  258.             icon.shadow = \"http://labs.google.com/ridefinder/images/mm_20_shadow.png\";
  259.             icon.iconSize = new GSize(12, 20);
  260.             icon.shadowSize = new GSize(22, 20);
  261.             icon.iconAnchor = new GPoint(6, 20);
  262.             icon.infoWindowAnchor = new GPoint(5, 1);
  263.            
  264.             ";
  265.         if ($this->showControl){
  266.           if ($this->controlType == ’small'){echo "map.addControl(new GSmallMapControl());\n";}
  267.           if ($this->controlType == 'large'){echo "map.addControl(new GLargeMapControl());\n";}
  268.        
  269.             }
  270.         if ($this->showType){
  271.         echo "map.addControl(new GMapTypeControl());\n";
  272.         }
  273.    
  274.     $numPoints = count($this->validPoints);
  275.     for ($g = 0; $g<$numPoints; $g++){
  276.         echo "var point".$g." = new GPoint(".$this->validPoints[$g]['long'].",".$this->validPoints[$g]['lat'].")\n;
  277.               var marker".$g." = new GMarker(point".$g.");\n
  278.               map.addOverlay(marker".$g.")\n
  279.               markers[".$g."] = marker".$g.";\n
  280.               GEvent.addListener(marker".$g.", \"click\", function() {\n";
  281.                 if ($this->validPoints[$g]['htmlMessage']!=null){
  282.                     echo "marker".$g.".openInfoWindowHtml(\"".$this->validPoints[$g]['htmlMessage']."\");\n";
  283.                 }else{
  284.                     echo "marker".$g.".openInfoWindowHtml(\"".$this->validPoints[$g]['passedAddress']."\");\n";
  285.                 }
  286.                 echo "});\n";
  287.     }
  288.         echo "      //]]>\n
  289.         }
  290.         window.onload = showmap;